.ab-map-wrapper {
max-width: 100%;
margin: 0 auto 60px auto;
padding: 20px;
box-sizing: border-box;
background: #ffffff;
border-radius: 16px;
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
} #ab-map-canvas {
width: 100% !important;
height: 450px;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
border: 1px solid #f0f0f0;
} .ab-map-form {
margin-top: 24px;
display: flex;
gap: 12px;
flex-wrap: wrap;
align-items: stretch;
} .ab-map-form .input-group {
flex: 1;
min-width: 200px;
position: relative;
} .ab-map-form .input-group label {
position: absolute;
left: 44px;
top: 50%;
transform: translateY(-50%);
font-size: 16px;
color: #999;
pointer-events: none;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
background: transparent;
padding: 0 4px;
z-index: 1;
}
.ab-map-form .input-group input:focus ~ label,
.ab-map-form .input-group input:not(:placeholder-shown) ~ label,
.ab-map-form .input-group select:focus ~ label,
.ab-map-form .input-group select:not([value=""]) ~ label {
top: 0;
left: 16px;
font-size: 12px;
color: #E4C57C;
background: #ffffff;
font-weight: 600;
} .ab-map-form input {
width: 100%;
height: 56px;
padding: 0 16px 0 44px;
border: 2px solid #e8e8e8;
border-radius: 12px;
font-size: 16px;
background: #fafafa;
color: #333;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-sizing: border-box;
font-family: inherit;
outline: none;
margin: 0;
line-height: 56px;
}
.ab-map-form input::placeholder {
color: transparent;
}
.ab-map-form input:hover {
border-color: #d0d0d0;
background: #ffffff;
}
.ab-map-form input:focus {
border-color: #E4C57C;
background: #ffffff;
box-shadow: 0 0 0 4px rgba(228, 197, 124, 0.1);
} .ab-map-form select {
width: 100%;
height: 56px;
padding: 0 16px 0 44px;
border: 2px solid #e8e8e8;
border-radius: 12px;
font-size: 16px;
background: #fafafa;
color: #333;
box-sizing: border-box;
font-family: inherit;
outline: none;
margin: 0;
appearance: none;
-webkit-appearance: none;
cursor: pointer;
}
.ab-map-form select:hover {
border-color: #d0d0d0;
background: #ffffff;
}
.ab-map-form select:focus {
border-color: #E4C57C;
background: #ffffff;
box-shadow: 0 0 0 4px rgba(228, 197, 124, 0.1);
}
.ab-map-form .input-group-vehicle::after {
content: '\f107';
font-family: 'Font Awesome 6 Free';
font-weight: 900;
position: absolute;
right: 16px;
top: 50%;
transform: translateY(-50%);
color: #999;
pointer-events: none;
font-size: 16px;
}
.ab-map-form .input-group-vehicle .input-icon {
z-index: 1;
} .ab-map-form .input-icon {
position: absolute;
left: 16px;
top: 50%;
transform: translateY(-50%);
color: #999;
font-size: 18px;
transition: color 0.3s ease;
pointer-events: none;
z-index: 2;
}
.ab-map-form .input-group:focus-within .input-icon {
color: #E4C57C;
} #ab-calculate {
height: 56px;
padding: 0 32px;
background: linear-gradient(135deg, #E4C57C 0%, #d4b55c 100%);
color: #1C1C1C;
border: none;
border-radius: 12px;
font-size: 16px;
font-weight: 700;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
white-space: nowrap;
text-transform: uppercase;
letter-spacing: 0.5px;
position: relative;
overflow: hidden;
box-shadow: 0 4px 15px rgba(228, 197, 124, 0.3);
display: flex;
align-items: center;
gap: 8px;
margin: 0;
flex-shrink: 0;
line-height: 1;
}
#ab-calculate:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(228, 197, 124, 0.4);
}
#ab-calculate:active {
transform: translateY(0);
box-shadow: 0 2px 10px rgba(228, 197, 124, 0.3);
}
#ab-calculate::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.3);
transform: translate(-50%, -50%);
transition: width 0.6s, height 0.6s;
}
#ab-calculate:active::after {
width: 300px;
height: 300px;
} #ab-results {
margin-top: 24px;
padding: 24px;
background: linear-gradient(135deg, #fafafa 0%, #f5f5f5 100%);
border-radius: 12px;
border-left: 4px solid #E4C57C;
font-size: 16px;
line-height: 1.6;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
animation: slideUp 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes slideUp {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
#ab-results .ab-route-info {
display: flex;
gap: 32px;
flex-wrap: wrap;
align-items: center;
}
#ab-results .ab-route-info p {
margin: 0;
display: flex;
align-items: center;
gap: 8px;
}
#ab-results .ab-route-info p::before {
content: '';
width: 8px;
height: 8px;
background: #E4C57C;
border-radius: 50%;
display: inline-block;
}
#ab-results strong {
color: #1C1C1C;
font-weight: 700;
} .pac-container {
border-radius: 12px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
border: 1px solid #e8e8e8;
font-family: inherit;
margin-top: 4px;
overflow: hidden;
}
.pac-container::after {
display: none !important;
}
.pac-item {
padding: 12px 16px;
font-size: 14px;
cursor: pointer;
transition: background-color 0.2s ease;
}
.pac-item:hover {
background-color: #f8f6f0;
}
.pac-item-selected {
background-color: #f8f6f0 !important;
}
.pac-icon {
margin-right: 12px;
}
.pac-item-query {
font-size: 16px;
color: #333;
}  @media screen and (max-width: 1024px) {
.ab-map-wrapper {
padding: 16px;
}
#ab-map-canvas {
height: 400px;
}
.ab-map-form input {
font-size: 15px;
}
} @media screen and (max-width: 768px) {
.ab-map-wrapper {
padding: 12px;
border-radius: 12px;
}
#ab-map-canvas {
height: 350px;
border-radius: 8px;
}
.ab-map-form {
flex-direction: column;
gap: 16px;
}
.ab-map-form .input-group {
width: 100%;
min-width: 100%;
}
.ab-map-form input {
height: 52px;
font-size: 16px;
line-height: 52px;
}
.ab-map-form select {
height: 52px;
}
#ab-calculate {
width: 100%;
height: 52px;
justify-content: center;
font-size: 16px;
border-radius: 12px;
}
#ab-results {
font-size: 15px;
padding: 16px;
}
#ab-results .ab-route-info {
flex-direction: column;
gap: 12px;
}
} @media screen and (max-width: 480px) {
.ab-map-wrapper {
padding: 10px;
border-radius: 8px;
box-shadow: none;
}
#ab-map-canvas {
height: 300px;
border-radius: 8px;
}
.ab-map-form input {
height: 48px;
padding: 0 14px 0 40px;
font-size: 16px;
border-radius: 10px;
line-height: 48px;
}
.ab-map-form select {
height: 48px;
padding: 0 14px 0 40px;
font-size: 16px;
border-radius: 10px;
}
.ab-map-form .input-group label {
left: 40px;
font-size: 15px;
}
.ab-map-form .input-icon {
left: 14px;
}
#ab-calculate {
height: 48px;
justify-content: center;
font-size: 15px;
border-radius: 10px;
}
#ab-results {
margin-top: 20px;
padding: 14px;
font-size: 14px;
border-radius: 8px;
}
} @media screen and (max-width: 320px) {
#ab-map-canvas {
height: 250px;
}
.ab-map-form input {
height: 44px;
padding: 0 12px 0 36px;
font-size: 14px;
line-height: 44px;
}
.ab-map-form select {
height: 44px;
padding: 0 12px 0 36px;
font-size: 14px;
}
#ab-calculate {
height: 44px;
font-size: 14px;
}
} @media screen and (max-height: 500px) and (orientation: landscape) {
#ab-map-canvas {
height: 200px;
}
.ab-map-form {
flex-direction: row;
}
} @media print {
.ab-map-wrapper {
box-shadow: none;
padding: 0;
}
.ab-map-form,
#ab-calculate {
display: none;
}
#ab-map-canvas {
height: 400px;
page-break-inside: avoid;
border: 1px solid #ccc;
}
#ab-results {
background: none;
box-shadow: none;
}
}  .ab-loading {
text-align: center;
padding: 30px;
}
.ab-spinner {
width: 40px;
height: 40px;
border: 4px solid #f0f0f0;
border-top: 4px solid #E4C57C;
border-radius: 50%;
animation: spin 0.8s linear infinite;
margin: 0 auto 15px;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
} .ab-error {
padding: 15px 20px;
background: #fff3f3;
border-left: 4px solid #e74c3c;
border-radius: 8px;
color: #c0392b;
font-size: 15px;
}
.ab-error i {
margin-right: 8px;
} .ab-route-info {
display: flex;
flex-direction: column;
gap: 20px;
} .ab-route-header {
display: flex;
align-items: center;
gap: 12px;
padding-bottom: 15px;
border-bottom: 2px solid #f0f0f0;
}
.ab-route-header i {
font-size: 24px;
color: #E4C57C;
}
.ab-route-header h3 {
margin: 0;
font-size: 20px;
color: #1C1C1C;
font-weight: 700;
} .ab-addresses {
display: flex;
flex-direction: column;
gap: 8px;
padding: 16px;
background: #fafafa;
border-radius: 10px;
}
.ab-address-item {
display: flex;
flex-direction: column;
gap: 4px;
}
.ab-address-label {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 1px;
color: #999;
font-weight: 600;
}
.ab-address-text {
font-size: 15px;
color: #333;
font-weight: 500;
}
.ab-address-arrow {
text-align: center;
color: #E4C57C;
font-size: 16px;
padding: 4px 0;
} .ab-trip-details {
display: flex;
gap: 20px;
flex-wrap: wrap;
}
.ab-detail-item {
flex: 1;
min-width: 140px;
display: flex;
align-items: center;
gap: 10px;
padding: 14px 16px;
background: #fafafa;
border-radius: 10px;
}
.ab-detail-item i {
font-size: 20px;
color: #E4C57C;
width: 24px;
text-align: center;
}
.ab-detail-label {
font-size: 13px;
color: #888;
margin-right: auto;
}
.ab-detail-value {
font-size: 16px;
font-weight: 700;
color: #1C1C1C;
white-space: nowrap;
} .ab-price-section {
background: linear-gradient(135deg, #E4C57C 0%, #d4b55c 100%);
border-radius: 12px;
padding: 24px;
text-align: center;
box-shadow: 0 4px 15px rgba(228, 197, 124, 0.3);
}
.ab-price-main {
display: flex;
flex-direction: column;
gap: 8px;
}
.ab-price-label {
font-size: 14px;
color: rgba(28, 28, 28, 0.8);
font-weight: 500;
}
.ab-price-value {
font-size: 42px;
font-weight: 800;
color: #1C1C1C;
line-height: 1;
}
.ab-price-note {
margin: 10px 0 0 0;
font-size: 13px;
color: rgba(28, 28, 28, 0.6);
font-style: italic;
} .ab-rate-info {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 14px 16px;
background: #f8f6f0;
border-radius: 10px;
border: 1px solid #f0e8d0;
}
.ab-rate-info i {
color: #E4C57C;
font-size: 16px;
margin-top: 2px;
}
.ab-rate-info p {
margin: 0;
font-size: 14px;
color: #666;
line-height: 1.5;
}
.ab-rate-info strong {
color: #1C1C1C;
} .ab-cta {
text-align: center;
margin-top: 5px;
}
.ab-book-button {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 16px 32px;
background: #1C1C1C;
color: #fff;
text-decoration: none;
border-radius: 12px;
font-size: 16px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
.ab-book-button:hover {
background: #333;
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
color: #E4C57C;
}
.ab-book-button:active {
transform: translateY(0);
}
.ab-book-button i {
transition: transform 0.3s ease;
}
.ab-book-button:hover i {
transform: translateX(4px);
} @media screen and (max-width: 768px) {
.ab-route-header h3 {
font-size: 18px;
}
.ab-trip-details {
flex-direction: column;
gap: 10px;
}
.ab-detail-item {
min-width: auto;
}
.ab-price-value {
font-size: 36px;
}
.ab-book-button {
width: 100%;
justify-content: center;
padding: 14px;
font-size: 15px;
}
}
@media screen and (max-width: 480px) {
.ab-price-section {
padding: 20px 16px;
}
.ab-price-value {
font-size: 32px;
}
.ab-detail-item {
padding: 12px 14px;
}
.ab-address-text {
font-size: 14px;
}
}