/* ============================================================
   Preisrechner — Shuttle Service Hoffmann
   Custom Styles (integrated with main site design system)
   ============================================================ */

/* ============================================================
   1. CSS Custom Properties (mapped to main site variables)
   ============================================================ */
:root {
    /* Map preisrechner vars → main site vars */
    --pr-primary:       var(--navy-mid, #1E3A5F);
    --pr-primary-dark:  var(--navy, #0F172A);
    --pr-secondary:     var(--sky, #0EA5E9);
    --pr-secondary-light: var(--sky-glow, rgba(14, 165, 233, 0.15));
    --pr-accent:        var(--sky, #0EA5E9);
    --pr-accent-dark:   var(--sky-light, #38BDF8);

    /* Neutrals (use main site vars with fallbacks) */
    --pr-slate:         var(--gray-600, #475569);
    --pr-muted:         var(--gray-500, #64748b);
    --pr-muted-light:   var(--gray-400, #94a3b8);
    --pr-card:          var(--white, #ffffff);
    --pr-border:        var(--gray-200, #E2E8F0);
    --pr-border-light:  var(--gray-100, #F1F5F9);

    /* Feedback */
    --pr-success:       #198754;
    --pr-success-bg:    #d1e7dd;
    --pr-danger:        #dc3545;
    --pr-danger-bg:     #f8d7da;

    /* Sizing */
    --pr-shadow-sm:     0 1px 2px rgba(0,0,0,.06);
    --pr-shadow:        0 2px 8px rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.04);
    --pr-shadow-lg:     0 8px 30px rgba(0,0,0,.10);
    --pr-transition:    .25s ease;
}

/* Prevent horizontal scroll on mobile */
html, body {
    overflow-x: hidden;
    max-width: 100vw;
}

/* ============================================================
   4. Hero
   ============================================================ */
.pr-hero {
    background: linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 50%, #0c4a7a 100%);
    color: #fff;
    padding: 80px 0 48px;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.pr-hero::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(14,165,233,.08) 0%, transparent 70%);
    border-radius: 50%;
}
.pr-hero h1,
.pr-hero .section-title {
    font-family: var(--font-display);
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 10px;
    position: relative;
    color: #fff;
}
.pr-hero p {
    color: rgba(255,255,255,.65);
    font-size: 1.05rem;
    position: relative;
}

/* ============================================================
   5. Service Cards (Top Selection)
   ============================================================ */
.pr-services {
    margin-top: -28px;
    padding-bottom: 8px;
    position: relative;
    z-index: 10;
}

.pr-service-card {
    background: var(--pr-card);
    border: 2px solid var(--pr-border);
    border-radius: var(--radius-lg);
    padding: 30px 20px;
    text-align: center;
    cursor: pointer;
    transition: all .3s ease;
    box-shadow: var(--pr-shadow);
    height: 100%;
    position: relative;
    overflow: hidden;
}
.pr-service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: transparent;
    transition: background var(--pr-transition);
}
.pr-service-card:hover {
    border-color: var(--pr-secondary);
    transform: translateY(-4px);
    box-shadow: var(--pr-shadow-lg);
}
.pr-service-card:hover::before {
    background: var(--pr-secondary);
}
.pr-service-card.active {
    border-color: var(--pr-secondary);
    background: linear-gradient(180deg, rgba(14,165,233,.04) 0%, var(--pr-card) 100%);
    box-shadow: var(--pr-shadow-lg);
}
.pr-service-card.active::before {
    background: var(--pr-accent);
}

.pr-service-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--sky-glow2);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 14px;
    font-size: 1.5rem;
    color: var(--pr-primary);
    transition: all .3s ease;
}
.pr-service-card:hover .pr-service-icon {
    transform: scale(1.08);
}
.pr-service-card.active .pr-service-icon {
    background: var(--pr-primary);
    color: #fff;
    box-shadow: 0 4px 12px rgba(14, 165, 233, .3);
}

.pr-service-card h5 {
    font-weight: 700;
    font-size: 1.05rem;
    margin-bottom: 6px;
    color: var(--navy);
}
.pr-service-card p {
    color: var(--pr-muted);
    font-size: .85rem;
    margin-bottom: 0;
    line-height: 1.4;
}

/* ============================================================
   6. Main Container
   ============================================================ */
.pr-main {
    flex: 1;
    padding: 28px 0 56px;
}

/* ============================================================
   7. Panels
   ============================================================ */
.pr-panel {
    display: none;
    animation: fadeSlideIn .4s ease;
}
.pr-panel.active { display: block; }

@keyframes fadeSlideIn {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   8. Card / Step
   ============================================================ */
.pr-card {
    background: var(--pr-card);
    border-radius: var(--radius-lg);
    padding: 32px;
    box-shadow: var(--pr-shadow);
    margin-bottom: 24px;
    border: 1px solid var(--pr-border-light);
}

/* ============================================================
   9. Step Header & Progress Indicator
   ============================================================ */
.pr-step-header {
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--pr-border-light);
}

.pr-step-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--pr-primary);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    padding: 4px 14px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: .6px;
    margin-bottom: 10px;
}
.pr-step-badge::before {
    content: '';
    width: 6px;
    height: 6px;
    background: var(--pr-accent);
    border-radius: 50%;
    flex-shrink: 0;
}

.pr-step-header h4 {
    font-weight: 700;
    font-size: 1.25rem;
    margin: 0;
    color: var(--navy);
}

/* ============================================================
   10. Radio Group (Option A/B/C)
   ============================================================ */
.pr-radio-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pr-radio {
    display: block;
    cursor: pointer;
    margin: 0;
}
.pr-radio input { display: none; }

.pr-radio-body {
    display: flex;
    align-items: center;
    gap: 16px;
    border: 2px solid var(--pr-border);
    border-radius: var(--radius);
    padding: 18px 22px;
    transition: all var(--pr-transition);
    background: var(--pr-card);
}
.pr-radio-body i {
    font-size: 1.4rem;
    color: var(--pr-muted-light);
    flex-shrink: 0;
    transition: color var(--pr-transition);
}
.pr-radio-body strong {
    display: block;
    font-size: .95rem;
    color: var(--navy);
}
.pr-radio-body small {
    display: block;
    color: var(--pr-muted);
    font-size: .82rem;
    margin-top: 2px;
}

.pr-radio:hover .pr-radio-body {
    border-color: var(--pr-secondary);
    box-shadow: var(--pr-shadow-sm);
}
.pr-radio.active .pr-radio-body {
    border-color: var(--pr-secondary);
    background: var(--pr-secondary-light);
    box-shadow: 0 0 0 3px rgba(14, 165, 233, .1);
}
.pr-radio.active .pr-radio-body i {
    color: var(--pr-secondary);
}

/* ============================================================
   11. Extra Cards (Kindersitz, Wasser, etc.)
   ============================================================ */
.pr-extra-card {
    border: 1.5px solid var(--pr-border);
    border-radius: var(--radius);
    padding: 22px 16px;
    text-align: center;
    transition: all var(--pr-transition);
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    background: var(--pr-card);
}
.pr-extra-card:hover {
    border-color: var(--pr-secondary);
    box-shadow: var(--pr-shadow-sm);
}
.pr-extra-card i {
    font-size: 1.6rem;
    color: var(--pr-secondary);
}
.pr-extra-card strong {
    font-size: .92rem;
    color: var(--navy);
}
.pr-extra-price {
    font-size: .78rem;
    color: var(--pr-muted);
    font-weight: 500;
}
.pr-extra-card .pr-stepper {
    max-width: 160px;
    margin: 0 auto;
    margin-top: auto;
    height: 42px;
}
.pr-extra-card .pr-stepper__btn {
    width: 42px;
    height: 40px;
}

/* ============================================================
   12. Package Cards (Chauffeur A) — 3 nebeneinander
   ============================================================ */
.pr-package-card {
    border: 2px solid var(--pr-border);
    border-radius: var(--radius-lg);
    padding: 28px 18px;
    text-align: center;
    cursor: pointer;
    transition: all .3s ease;
    height: 100%;
    position: relative;
    background: var(--pr-card);
}
.pr-package-card:hover {
    border-color: var(--pr-secondary);
    transform: translateY(-4px);
    box-shadow: var(--pr-shadow-lg);
}
.pr-package-card.active {
    border-color: var(--pr-accent);
    background: var(--sky-glow);
    box-shadow: 0 0 0 3px rgba(14, 165, 233, .15), var(--pr-shadow);
}

/* "Beliebt" badge styling for middle package */
.pr-package-card.active .pr-package-badge .badge {
    background: var(--pr-accent) !important;
    color: #fff !important;
}

.pr-package-badge {
    font-weight: 700;
    font-size: .88rem;
    margin-bottom: 10px;
    color: var(--pr-slate);
}
.pr-package-price {
    font-size: 2.4rem;
    font-weight: 800;
    color: var(--pr-accent);
    margin-bottom: 14px;
    line-height: 1;
}
.pr-package-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: .88rem;
    color: var(--pr-slate);
}
.pr-package-card ul li {
    padding: 5px 0;
}
.pr-package-card ul li i {
    color: var(--pr-secondary);
}

/* ============================================================
   13. Subcard (Option C: Fahrt 1/2)
   ============================================================ */
.pr-subcard {
    background: #f8f9fa;
    border: 1.5px solid var(--pr-border);
    border-radius: var(--radius);
    padding: 22px;
}
.pr-subcard h6 {
    font-weight: 700;
    font-size: .95rem;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    color: var(--pr-primary);
}

/* ============================================================
   14. Price Display — Gold accent, large, centered
   ============================================================ */
.pr-price-display {
    text-align: center;
    padding: 28px 20px;
    background: linear-gradient(135deg, rgba(14,165,233,.04) 0%, rgba(14,165,233,.08) 100%);
    border: 2px solid rgba(14, 165, 233, .2);
    border-radius: var(--radius-lg);
    margin-bottom: 8px;
}
.pr-price-label {
    font-size: .92rem;
    color: var(--pr-muted);
    font-weight: 600;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: .5px;
    font-size: .8rem;
}
.pr-price-value {
    font-size: 3rem;
    font-weight: 800;
    color: var(--pr-accent-dark);
    line-height: 1.1;
    text-shadow: 0 1px 2px rgba(0,0,0,.05);
}
.pr-price-original {
    font-size: .95rem;
    color: var(--pr-muted);
    text-decoration: line-through;
    margin-top: 6px;
}
.pr-price-rabatt-info {
    font-size: .88rem;
    color: var(--pr-success);
    font-weight: 700;
    margin-top: 4px;
}
.pr-price-details {
    font-size: .82rem;
    color: var(--pr-muted);
    margin-top: 12px;
    line-height: 1.7;
    border-top: 1px solid rgba(14,165,233,.15);
    padding-top: 12px;
}

/* ============================================================
   15. Tour Info Panel
   ============================================================ */
.pr-tour-info-panel {
    background: linear-gradient(135deg, rgba(14,165,233,.04) 0%, rgba(14,165,233,.08) 100%);
    border: 1.5px solid rgba(14,165,233,.2);
    border-radius: var(--radius);
    padding: 18px 22px;
}
.pr-tour-info-panel h6 {
    color: var(--pr-primary);
    font-weight: 700;
    margin-bottom: 12px;
}
.pr-tour-info-panel .table {
    font-size: .88rem;
}
.pr-tour-info-panel .table td {
    padding: 4px 10px;
    border: none;
}

/* ============================================================
   16. Payment Group
   ============================================================ */
.pr-payment-group {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.pr-payment {
    flex: 1;
    min-width: 125px;
    cursor: pointer;
    border: 2px solid var(--pr-border);
    border-radius: var(--radius);
    padding: 14px 12px;
    text-align: center;
    font-size: .88rem;
    font-weight: 600;
    transition: all var(--pr-transition);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--pr-slate);
    background: var(--pr-card);
}
.pr-payment input[type="radio"] { display: none; }
.pr-payment i { font-size: 1.1rem; }
.pr-payment:hover {
    border-color: var(--pr-secondary);
    box-shadow: var(--pr-shadow-sm);
}
.pr-payment.active {
    border-color: var(--pr-secondary);
    background: var(--pr-secondary-light);
    color: var(--pr-primary);
    box-shadow: 0 0 0 3px rgba(14, 165, 233, .1);
}

/* ============================================================
   17. Rabatt Feedback
   ============================================================ */
.rabatt-feedback {
    font-size: .82rem;
    margin-top: 6px;
    min-height: 20px;
    font-weight: 500;
    transition: color var(--pr-transition);
}
.rabatt-feedback.valid {
    color: var(--pr-success);
}
.rabatt-feedback.invalid {
    color: var(--pr-danger);
}
.rabatt-feedback i {
    font-size: .9rem;
}

/* ============================================================
   18. Form Inputs — enhanced styling
   ============================================================ */
.pr-card .form-control,
.pr-card .form-select {
    border-radius: 10px;
    padding: .6rem 1rem;
    border: 1.5px solid var(--gray-200);
    font-size: .92rem;
    transition: border-color .2s, box-shadow .2s;
    background: var(--white);
}
.pr-card .form-control:focus,
.pr-card .form-select:focus {
    border-color: var(--sky);
    box-shadow: 0 0 0 3px rgba(14,165,233,.1);
}
.pr-card .form-label {
    font-weight: 600;
    font-size: .85rem;
    color: var(--gray-600);
    margin-bottom: .4rem;
}

/* ============================================================
   19. Tours (Ausflugsfahrten)
   ============================================================ */
.pr-tours {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.pr-tour-card {
    border: 1.5px solid var(--pr-border);
    border-radius: var(--radius-lg);
    padding: 22px 24px;
    transition: all var(--pr-transition);
    background: var(--pr-card);
    position: relative;
    overflow: hidden;
}
.pr-tour-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--pr-border);
    transition: background var(--pr-transition);
}
.pr-tour-card:hover {
    border-color: var(--pr-secondary);
    box-shadow: var(--pr-shadow);
}
.pr-tour-card:hover::before {
    background: var(--pr-secondary);
}
.pr-tour-card.selected {
    border-color: var(--pr-secondary);
    background: var(--pr-secondary-light);
    box-shadow: 0 0 0 3px rgba(14, 165, 233, .1);
}
.pr-tour-card.selected::before {
    background: var(--pr-accent);
}
.pr-tour-card.ausgebucht {
    opacity: .55;
    pointer-events: auto;
}
.pr-tour-card.ausgebucht:hover {
    transform: none;
    box-shadow: none;
}

.pr-tour-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 10px;
    gap: 12px;
}
.pr-tour-name {
    font-weight: 700;
    font-size: 1.08rem;
    color: var(--navy);
}
.pr-tour-price {
    font-weight: 800;
    color: var(--pr-accent-dark);
    font-size: 1.25rem;
    white-space: nowrap;
}
.pr-tour-price small {
    font-size: .72rem;
    font-weight: 500;
    color: var(--pr-muted);
}
.pr-tour-desc {
    font-size: .88rem;
    color: var(--pr-slate);
    margin-bottom: 14px;
    line-height: 1.5;
}
.pr-tour-meta {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    font-size: .82rem;
    color: var(--pr-muted);
    margin-bottom: 4px;
}
.pr-tour-meta span {
    display: flex;
    align-items: center;
    gap: 5px;
}
.pr-tour-meta i {
    color: var(--pr-secondary);
    font-size: .9rem;
}
.pr-tour-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--pr-border-light);
}
.pr-tour-slots {
    font-size: .85rem;
    color: var(--pr-slate);
}
.pr-tour-slots strong {
    color: var(--pr-secondary);
}

/* ============================================================
   19b. Counter Group — visual strip for stepper items
   ============================================================ */
.pr-counter-group {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    background: linear-gradient(135deg, rgba(14,165,233,.04) 0%, rgba(241,245,249,.5) 100%);
    border: 1.5px solid var(--gray-100);
    border-radius: var(--radius-lg, 16px);
    padding: 24px;
    margin-top: 20px;
}
.pr-counter-item {
    flex: 1;
    min-width: 120px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.pr-counter-item .pr-stepper {
    margin-top: auto;
}

/* ============================================================
   19c. Stepper (Personen, Gepäck, etc.) — pill design
   ============================================================ */
.pr-stepper {
    display: flex;
    align-items: center;
    border: 2px solid var(--gray-200);
    border-radius: 50px;
    overflow: hidden;
    background: var(--white);
    width: 100%;
    max-width: none;
    height: 48px;
    transition: border-color .2s, box-shadow .2s;
}
.pr-stepper:hover {
    border-color: rgba(14,165,233,.4);
}
.pr-stepper:focus-within {
    border-color: var(--sky);
    box-shadow: 0 0 0 3px rgba(14,165,233,.1);
}
.pr-stepper__btn {
    width: 48px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--sky);
    font-size: 1.15rem;
    transition: all .2s;
    flex-shrink: 0;
}
.pr-stepper__btn:hover {
    background: var(--sky);
    color: #fff;
}
.pr-stepper__btn:active {
    transform: scale(.88);
}
.pr-stepper__value {
    flex: 1;
    text-align: center;
    border: none;
    background: none;
    font-weight: 800;
    font-size: 1.2rem;
    color: var(--navy);
    -moz-appearance: textfield;
    min-width: 0;
    padding: 0;
    font-family: var(--font);
}
.pr-stepper__value::-webkit-inner-spin-button,
.pr-stepper__value::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.pr-stepper__label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 700;
    font-size: .85rem;
    color: var(--gray-700, #334155);
    margin-bottom: 10px;
}
.pr-stepper__label i {
    color: var(--sky);
    font-size: 1.05rem;
}

/* ============================================================
   20. Buttons
   ============================================================ */
/* Back button: outline on white background */
.pr-btn-back.btn-fancy--outline {
    border-color: var(--gray-200);
    color: var(--gray-600);
}
.pr-btn-back.btn-fancy--outline .btn-fancy__icon {
    background: var(--gray-200);
    color: var(--gray-600);
}
.pr-btn-back.btn-fancy--outline:hover {
    background: var(--gray-100);
    border-color: var(--sky);
    color: var(--sky);
}
.pr-btn-back.btn-fancy--outline:hover .btn-fancy__icon {
    background: var(--sky);
    color: #fff;
}

/* All outline buttons on white backgrounds */
.pr-card .btn-fancy--outline,
.pr-main .btn-fancy--outline {
    border-color: var(--gray-200);
    color: var(--gray-600);
}
.pr-card .btn-fancy--outline .btn-fancy__icon,
.pr-main .btn-fancy--outline .btn-fancy__icon {
    background: var(--gray-200);
    color: var(--gray-600);
}
.pr-card .btn-fancy--outline:hover,
.pr-main .btn-fancy--outline:hover {
    background: var(--gray-100);
    border-color: var(--sky);
    color: var(--sky);
}
.pr-card .btn-fancy--outline:hover .btn-fancy__icon,
.pr-main .btn-fancy--outline:hover .btn-fancy__icon {
    background: var(--sky);
    color: #fff;
}

/* ============================================================
   21. Success Message
   ============================================================ */
#bookingSuccess {
    animation: successPop .5s ease;
}
.pr-success-icon {
    font-size: 4.5rem;
    color: var(--pr-success);
    margin-bottom: 16px;
    animation: successBounce .6s ease .3s both;
}
@keyframes successPop {
    from { opacity: 0; transform: scale(.92); }
    to   { opacity: 1; transform: scale(1); }
}
@keyframes successBounce {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.15); }
    100% { transform: scale(1); }
}

#bookingSuccess h3 {
    color: var(--navy);
    font-weight: 700;
    font-size: 1.5rem;
    margin-bottom: 8px;
}
#bookingSuccess p {
    color: var(--pr-muted);
}
#bookingSuccess strong {
    color: var(--pr-primary);
    font-size: 1.1rem;
}

/* ============================================================
   22. Alerts & Inline Messages
   ============================================================ */
.pr-alert {
    border-radius: var(--radius);
    padding: 14px 18px;
    font-size: .92rem;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    animation: alertSlideIn .3s ease;
}
.pr-alert-error {
    background: var(--pr-danger-bg);
    color: var(--pr-danger);
    border: 1px solid rgba(220, 53, 69, .2);
}
.pr-alert-success {
    background: var(--pr-success-bg);
    color: var(--pr-success);
    border: 1px solid rgba(25, 135, 84, .2);
}

/* Bootstrap inline alerts used by JS */
.pr-inline-alert {
    animation: alertSlideIn .3s ease;
    border-radius: var(--radius);
    font-size: .92rem;
}
.pr-inline-alert ul {
    padding-left: 18px;
    margin-bottom: 0;
}
.pr-inline-alert li {
    font-size: .88rem;
}

@keyframes alertSlideIn {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Bootstrap alerts — use default styles */

/* ============================================================
   23. Loading / Spinner
   ============================================================ */
.btn-loading {
    position: relative;
    pointer-events: none;
    color: transparent !important;
}
.btn-loading::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 22px;
    height: 22px;
    margin: -11px 0 0 -11px;
    border: 3px solid rgba(255,255,255,.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin .6s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Spinner in buttons (used by JS setLoading) */
.pr-main .spinner-border-sm {
    width: 16px;
    height: 16px;
    border-width: 2px;
}

/* ============================================================
   24. Zwischenstopp Rows
   ============================================================ */
.zwischenstopp-row {
    animation: fadeSlideIn .25s ease;
}
.zwischenstopp-row .btn-outline-danger {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ============================================================
   25. Misc / Utility
   ============================================================ */

/* Smooth scroll behavior */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 80px;
}

/* Select arrow — use default Bootstrap */

/* Hint text — use default Bootstrap .text-muted */

/* ============================================================
   26. Address Autocomplete
   ============================================================ */
.pr-ac-wrap {
    position: relative;
}
.pr-ac-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1050;
    background: var(--white);
    border: 1.5px solid var(--gray-200);
    border-top: none;
    border-radius: 0 0 10px 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,.1);
    max-height: 220px;
    overflow-y: auto;
}
.pr-ac-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    cursor: pointer;
    font-size: .88rem;
    color: var(--gray-700, #334155);
    transition: background .15s;
    border-bottom: 1px solid var(--gray-100);
}
.pr-ac-item:last-child {
    border-bottom: none;
}
.pr-ac-item:hover,
.pr-ac-item.active {
    background: rgba(14,165,233,.06);
}
.pr-ac-item i {
    color: var(--sky);
    font-size: .95rem;
    flex-shrink: 0;
}
.pr-ac-item span {
    line-height: 1.3;
}

/* Invalid state (matches rounded input design) */
.pr-card .form-control.is-invalid,
.pr-card .form-select.is-invalid {
    border-color: #dc3545;
    box-shadow: 0 0 0 3px rgba(220,53,69,.1);
}

/* ============================================================
   30. Smooth Step Transitions
   ============================================================ */
@keyframes slideInRight {
    from { opacity: 0; transform: translateX(40px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes slideInLeft {
    from { opacity: 0; transform: translateX(-40px); }
    to   { opacity: 1; transform: translateX(0); }
}
.slide-in-right { animation: slideInRight 350ms ease both; }
.slide-in-left  { animation: slideInLeft  350ms ease both; }

/* ============================================================
   31. Progress Bar
   ============================================================ */
.pr-progress {
    display: flex;
    align-items: flex-start;
    margin-bottom: 28px;
    padding: 0 8px;
}
.pr-progress__step {
    flex: 1;
    text-align: center;
    position: relative;
}
.pr-progress__step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 18px;
    left: calc(50% + 22px);
    width: calc(100% - 44px);
    height: 2px;
    background: var(--gray-200, #E2E8F0);
    transition: background .3s;
}
.pr-progress__step.done:not(:last-child)::after {
    background: var(--sky, #0EA5E9);
}
.pr-progress__dot {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid var(--gray-200, #E2E8F0);
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .82rem;
    font-weight: 700;
    color: var(--gray-400, #94a3b8);
    transition: all .3s;
    position: relative;
    z-index: 1;
}
.pr-progress__step.active .pr-progress__dot {
    background: var(--sky, #0EA5E9);
    border-color: var(--sky, #0EA5E9);
    color: #fff;
    box-shadow: 0 0 0 4px rgba(14, 165, 233, .15);
}
.pr-progress__step.done .pr-progress__dot {
    background: var(--pr-success, #198754);
    border-color: var(--pr-success, #198754);
    color: #fff;
}
.pr-progress__label {
    display: block;
    font-size: .72rem;
    color: var(--gray-500, #64748b);
    margin-top: 6px;
    line-height: 1.2;
}
.pr-progress__step.active .pr-progress__label {
    color: var(--sky, #0EA5E9);
    font-weight: 600;
}

/* ============================================================
   32. DSGVO Checkbox
   ============================================================ */
.pr-dsgvo .form-check-input {
    width: 1.15em;
    height: 1.15em;
    margin-top: .2em;
    border: 2px solid var(--gray-300, #CBD5E1);
    border-radius: 4px;
    cursor: pointer;
    transition: all .2s;
}
.pr-dsgvo .form-check-input:checked {
    background-color: var(--sky, #0EA5E9);
    border-color: var(--sky, #0EA5E9);
}
.pr-dsgvo .form-check-input:focus {
    box-shadow: 0 0 0 3px rgba(14, 165, 233, .15);
    border-color: var(--sky, #0EA5E9);
}
.pr-dsgvo .form-check-label {
    font-size: .84rem;
    color: var(--gray-600, #475569);
    cursor: pointer;
    line-height: 1.5;
}
.pr-dsgvo .form-check-label a {
    color: var(--sky, #0EA5E9);
    text-decoration: underline;
}

/* ============================================================
   33. Booking Summary
   ============================================================ */
.pr-summary {
    background: linear-gradient(135deg, rgba(14,165,233,.04) 0%, rgba(241,245,249,.5) 100%);
    border: 1.5px solid var(--gray-100, #F1F5F9);
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 24px;
}
.pr-summary h6 {
    font-weight: 700;
    color: var(--navy, #0F172A);
    margin-bottom: 16px;
    font-size: .95rem;
}
.pr-summary__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}
.pr-summary__label {
    font-size: .75rem;
    color: var(--gray-500, #64748b);
    text-transform: uppercase;
    letter-spacing: .4px;
    margin-bottom: 2px;
}
.pr-summary__value {
    font-weight: 700;
    color: var(--navy, #0F172A);
    font-size: .92rem;
}

/* ============================================================
   34. WhatsApp Floating Button
   ============================================================ */
.pr-wa-float {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 1040;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #25D366;
    color: #fff;
    font-size: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(37,211,102,.4);
    transition: transform .3s, box-shadow .3s;
    text-decoration: none;
}
.pr-wa-float:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 24px rgba(37,211,102,.5);
    color: #fff;
}

/* ============================================================
   35. Enhanced Success Message
   ============================================================ */
.pr-success-summary {
    background: var(--gray-50, #F8FAFC);
    border-radius: 12px;
    padding: 20px;
    margin: 24px 0;
}
.pr-success-summary .pr-summary__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}
.pr-success-info {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 24px;
}
.pr-success-info__item {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}
.pr-success-info__item i {
    font-size: 1.5rem;
    color: var(--sky, #0EA5E9);
    flex-shrink: 0;
    margin-top: 2px;
}
.pr-success-info__item p {
    margin: 0;
    font-size: .88rem;
    color: var(--gray-500, #64748b);
}
.pr-success-info__item strong {
    font-size: .95rem;
    color: var(--navy, #0F172A);
}
.pr-success-info__item a {
    color: var(--sky, #0EA5E9);
}

/* KM auto-calculation hint */
.pr-km-hint {
    transition: color .3s;
}
.pr-km-calculated {
    color: var(--pr-success, #198754) !important;
    font-weight: 600;
}

/* ============================================================
   27. Responsive — Tablet (max-width: 768px)
   ============================================================ */
@media (max-width: 768px) {
    .pr-main, .pr-main .container, .pr-panel, .pr-card {
        overflow-x: hidden;
        max-width: 100%;
    }

    .pr-hero h1,
    .pr-hero .section-title { font-size: 1.65rem; }
    .pr-hero { padding: 60px 0 28px; }
    .pr-hero p { font-size: .95rem; }

    .pr-card { padding: 22px 18px; }

    .pr-progress__label { display: none; }
    .pr-progress { margin-bottom: 16px; }
    .pr-card.pr-step { padding-top: 28px; }

    .pr-service-card { padding: 22px 16px; }
    .pr-service-card h5 { font-size: .95rem; }
    .pr-service-card p { font-size: .8rem; }

    .pr-radio-body {
        padding: 14px 16px;
        gap: 12px;
    }
    .pr-radio-body strong { font-size: .9rem; }

    .pr-price-value { font-size: 2.4rem; }
    .pr-price-display { padding: 22px 16px; }

    .pr-payment-group {
        flex-direction: column;
    }
    .pr-payment {
        min-width: unset;
    }

    .pr-tour-header {
        flex-direction: column;
        gap: 6px;
    }
    .pr-tour-meta {
        flex-direction: column;
        gap: 6px;
    }
    .pr-tour-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    .pr-tour-footer .d-flex {
        width: 100%;
    }
    .pr-tour-footer .btn-select-tour {
        flex: 1;
    }

    .pr-package-card {
        padding: 20px 14px;
    }
    .pr-package-price { font-size: 1.8rem; }

    .pr-step-header h4 { font-size: 1.1rem; }

    .pr-counter-group { gap: 14px; padding: 18px 16px; }

    .pr-progress__label { display: none; }
    .pr-progress__dot { width: 28px; height: 28px; font-size: .72rem; }
    .pr-progress__step:not(:last-child)::after { top: 14px; left: calc(50% + 18px); width: calc(100% - 36px); }
    .pr-progress { margin-bottom: 28px; }
    .pr-summary__grid { grid-template-columns: 1fr; }
    .pr-wa-float { display: none; }
}

/* ============================================================
   28. Responsive — Mobile (max-width: 480px)
   ============================================================ */
@media (max-width: 480px) {
    .pr-main, .pr-main .container, .pr-panel, .pr-card {
        overflow-x: hidden;
        max-width: 100%;
    }
    .pr-card .row { margin-left: 0; margin-right: 0; }
    .pr-card .row > [class*="col"] { padding-left: 6px; padding-right: 6px; }

    .pr-hero h1,
    .pr-hero .section-title { font-size: 1.4rem; }
    .pr-hero p { font-size: .88rem; }
    .pr-services { margin-top: -20px; }

    .pr-service-icon {
        width: 48px;
        height: 48px;
        font-size: 1.2rem;
    }

    .pr-card { padding: 18px 14px; }

    .pr-price-value { font-size: 2rem; }
    .pr-price-display { padding: 18px 12px; }
    .pr-price-details { font-size: .78rem; }

    .pr-extra-card { padding: 16px 10px; }

    .pr-package-price { font-size: 1.5rem; }
    .pr-package-card ul { font-size: .8rem; }

    .pr-radio-body {
        padding: 12px;
        gap: 10px;
    }
    .pr-radio-body i { font-size: 1.2rem; }

    .pr-tour-card { padding: 16px; }
    .pr-tour-name { font-size: .98rem; }
    .pr-tour-price { font-size: 1.1rem; }

    .pr-progress__label { display: none; }
    .pr-progress__dot { width: 26px; height: 26px; font-size: .7rem; }
    .pr-progress__step:not(:last-child)::after { top: 13px; left: calc(50% + 17px); width: calc(100% - 34px); }
    .pr-progress { margin-bottom: 28px; padding: 0 4px; }

    .pr-step-header {
        padding-bottom: 12px;
        margin-bottom: 18px;
    }

    .pr-counter-group {
        flex-direction: column;
        gap: 16px;
        padding: 16px;
    }
    .pr-counter-item { min-width: unset; }
    .pr-stepper { max-width: 220px; margin: 0 auto; }
    .pr-success-summary .pr-summary__grid { grid-template-columns: 1fr; }

    .d-flex.gap-2 {
        flex-direction: row;
    }
    .d-flex.gap-2 .flex-grow-1 {
        flex: 1;
        min-width: 0;
    }
}

/* ============================================================
   28b. Responsive — Buttons & overflow fix (all mobile)
   ============================================================ */
@media (max-width: 768px) {
    /* Prevent horizontal page scroll */
    .pr-main,
    .pr-card,
    .pr-panel {
        overflow-x: hidden;
    }
    /* Let buttons wrap text on small screens */
    .pr-main .btn-fancy {
        white-space: normal;
        word-break: break-word;
        text-align: center;
        max-width: 100%;
        font-size: .88rem;
        padding: 0.65rem 1.2rem;
        padding-left: 16px;
    }
    .pr-main .btn-fancy .btn-fancy__icon {
        flex-shrink: 0;
    }
    /* Button rows: don't let them overflow */
    .pr-main .d-flex.gap-2 {
        flex-wrap: wrap;
        max-width: 100%;
    }
    .pr-main .d-flex.gap-2 > .btn-fancy {
        min-width: 0;
    }
    /* Input groups with buttons */
    .pr-card .input-group {
        flex-wrap: wrap;
    }
    .pr-card .input-group .btn-fancy {
        font-size: .82rem;
        padding: .5rem 1rem;
        padding-left: 12px;
    }
    /* Summary grid */
    .pr-summary { padding: 18px 16px; }
}
@media (max-width: 380px) {
    .pr-main .btn-fancy {
        font-size: .82rem;
        padding: 0.6rem 1rem;
        padding-left: 14px;
        gap: 0.5rem;
    }
    .pr-main .btn-fancy .btn-fancy__icon {
        width: 22px;
        height: 22px;
    }
}

/* ============================================================
   30. Fullscreen App Mode
   ============================================================ */
.pr-fs-header {
    display: none;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 1100;
    height: 56px;
    padding: 0 16px;
    background: #fff;
    border-bottom: 1px solid var(--pr-border, #E2E8F0);
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.pr-fs-close {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: var(--gray-100, #F1F5F9);
    color: var(--gray-600, #475569);
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all .2s;
    flex-shrink: 0;
}
.pr-fs-close:hover {
    background: var(--gray-200, #E2E8F0);
    color: var(--navy, #0F172A);
}
.pr-fs-title {
    flex: 1;
    text-align: center;
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--navy, #0F172A);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pr-fs-spacer {
    width: 44px;
    flex-shrink: 0;
}

/* When fullscreen is active */
body.pr-fullscreen .pr-fs-header {
    display: flex;
}
body.pr-fullscreen .nav-main,
body.pr-fullscreen .breadcrumb-nav,
body.pr-fullscreen .pr-hero,
body.pr-fullscreen .pr-services,
body.pr-fullscreen .footer,
body.pr-fullscreen .mobile-bottom-bar,
body.pr-fullscreen .cookie-banner,
body.pr-fullscreen .scroll-top,
body.pr-fullscreen .pr-wa-float {
    display: none !important;
}
body.pr-fullscreen .pr-main {
    min-height: 100dvh;
    padding-top: 56px;
}
body.pr-fullscreen .pr-main > .container {
    max-width: 720px;
}
body.pr-fullscreen .pr-progress {
    position: sticky;
    top: 56px;
    z-index: 1090;
    background: #fff;
    padding-top: 16px;
    padding-bottom: 16px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--pr-border-light, #F1F5F9);
}

/* Entry animation */
body.pr-fullscreen .pr-panel.active {
    animation: prFsEnter 350ms ease both;
}
@keyframes prFsEnter {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Exit animation (applied temporarily) */
body.pr-fs-exiting .pr-panel.active {
    animation: prFsExit 250ms ease both;
}
@keyframes prFsExit {
    from { opacity: 1; transform: translateY(0); }
    to   { opacity: 0; transform: translateY(20px); }
}

/* Mobile tweaks */
@media (max-width: 768px) {
    .pr-fs-header {
        height: 48px;
        padding: 0 10px;
    }
    .pr-fs-title { font-size: .95rem; }
    .pr-fs-close { width: 40px; height: 40px; font-size: 1rem; }
    .pr-fs-spacer { width: 40px; }
    body.pr-fullscreen .pr-main {
        padding-top: 48px;
    }
    body.pr-fullscreen .pr-progress {
        top: 18px;
        padding-top: 12px;
        padding-bottom: 12px;
    }
    body.pr-fullscreen .pr-card {
        padding: 20px 14px;
    }
}

/* ============================================================
   36. PayPal Button Container
   ============================================================ */
.paypal-button-container {
    min-height: 48px;
    max-width: 500px;
}

/* ============================================================
   29. Print Styles
   ============================================================ */
@media print {
    .pr-services,
    .pr-hero,
    .pr-btn-next,
    .pr-btn-back,
    .pr-submit-btn { display: none !important; }

    .pr-card {
        box-shadow: none;
        border: 1px solid #ccc;
        break-inside: avoid;
    }
    .pr-price-value { color: #000 !important; }
    body { background: #fff; }
}