/*!
 * Start Bootstrap - SB Admin 2 v4.1.3 (https://startbootstrap.com/theme/sb-admin-2)
 * Copyright 2013-2021 Start Bootstrap
 * Licensed under MIT (https://github.com/StartBootstrap/startbootstrap-sb-admin-2/blob/master/LICENSE)
 *//*!
 * Bootstrap v4.6.0 (https://getbootstrap.com/)
 * Copyright 2011-2021 The Bootstrap Authors
 * Copyright 2011-2021 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
 */

.overflow-ellipsis{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  -webkit-border-radius: 10px;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  -webkit-border-radius: 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.3);
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}

::-webkit-scrollbar-thumb:window-inactive {
  background: rgba(255, 255, 255, 0.3);
}

.bb-1{
  border-bottom: 1px solid #B0B0B0;
}

        .navbar{
          background: radial-gradient(circle at center, #d35400 0%, #871400 100%);
          border-bottom: 1px solid #871400;
        }
        :root {
            --brand-brown: #4a3625;
            --brand-gold: #c5a880;
            --brand-bronze: #8b6b4a;
            --bg-peachy: #fcf9f6;
            --border-peachy: #d8c8b8;
        }

        body {
            font-family: 'Inter', sans-serif;
            /* Rich orange radial background mimicking the mandala backdrop */
            background-color: #ffd0ac;
            background: radial-gradient(circle at center, #d35400 0%, #871400 100%);
            background-image: url('/assets/images/background.jpg') !important;
            background-size: cover;
            display: flex;
            align-items: center;
            justify-content: center;
            padding :60px 5px 12px 5px;
        }

        .font-serif {
            font-family: 'Playfair Display', serif;
        }

        .berkshire-swash {
            font-family: 'Berkshire Swash', serif;
        }

        /* Main Card Container */
        .card-body {
            background: #f5e9de;
            overflow-x: hidden;
        }

        .main-card {
            background: linear-gradient(135deg, #f5e9de, #e4d1c0);
            border-radius: 24px;
            box-shadow: 0 25px 50px rgba(0,0,0,0.4);
            border: 2px solid rgba(253, 251, 249, 0.5);
            width: 100%;
        }

        /* Left Side Image Panel */
        .img-wrapper {
            background-color: #253239;
            border: 4px solid #253239;
            border-radius: 16px;
            padding: 2px;
            height: 100%;
            min-height: 500px;
        }

        .img-inner {
            border: 1px solid var(--brand-gold);
            border-radius: 12px;
            overflow: hidden;
            height: 100%;
            position: relative;
        }

        .img-inner img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            opacity: 0.85;
        }

        .img-overlay {
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            background: linear-gradient(to bottom, rgba(0,0,0,0.1) 40%, rgba(0,0,0,0.8) 100%);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .img-overlay h2 {
            color: #f3e1c6;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.9);
            text-align: center;
            font-size: 3rem;
            line-height: 1.1;
            letter-spacing: 1px;
        }

        /* Form Inputs */
        .form-label {
            font-size: 0.7rem;
            font-weight: 700;
            color: var(--brand-brown);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 0.3rem;
        }

        .input-icon-wrapper {
            position: relative;
            display: flex;
            align-items: center;
        }

        .input-icon-wrapper i {
            position: absolute;
            left: 15px;
            color: var(--brand-bronze);
            font-size: 1.1rem;
        }

        .themed-input {
            width: 100%;
            background-color: var(--bg-peachy);
            border: 1px solid var(--border-peachy);
            border-radius: 50rem; /* Pill shape */
            padding: 0.6rem 1rem 0.6rem 2.5rem; /* Space for icon */
            font-size: 0.875rem;
            color: #2c1e16;
            box-shadow: inset 0 2px 4px rgba(0,0,0,0.02);
            transition: all 0.2s;
        }

        .themed-input:focus {
            outline: none;
            border-color: var(--brand-bronze);
            box-shadow: 0 0 0 3px rgba(139, 107, 74, 0.2);
            background-color: #fff;
        }

        /* Read-only Date specific styling from reference */
        .input-date {
            background-color: #eaf1fb;
            border-color: #c0d3ef;
            color: #1a365d;
            font-weight: 600;
        }

        /* Counter Buttons */
        .counter-wrapper {
            display: flex;
            align-items: center;
            justify-content: space-between;
            background-color: var(--bg-peachy);
            border: 1px solid var(--border-peachy);
            border-radius: 50rem;
            padding: 0.3rem 0.4rem 0.3rem 1rem;
        }

        .counter-controls {
            background-color: #f0e4d8;
            border: 1px solid #e1cfbe;
            border-radius: 50rem;
            padding: 2px;
            display: flex;
            align-items: center;
        }

        .btn-counter {
            width: 26px;
            height: 26px;
            border-radius: 50%;
            border: none;
            background: transparent;
            color: var(--brand-bronze);
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            transition: background 0.2s;
        }

        .btn-counter:hover {
            background-color: #e4d1c0;
        }

        /* Summary Box */
        .summary-box {
            background-color: #f0e6da;
            border: 1px solid var(--border-peachy);
            border-radius: 12px;
            padding: 1rem;
            color: var(--brand-brown);
            font-size: 0.85rem;
        }

        /* Pay Button */
        .btn-pay {
            background: linear-gradient(to right, #0d2a4a, #24425d, #926a45);
            border: 1px solid rgba(162, 133, 106, 0.3);
            border-radius: 50rem;
            color: white;
            padding: 0.75rem 1rem;
            width: 100%;
            text-align: center;
            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
            transition: opacity 0.2s;
            text-decoration: none;
            display: inline-block;
        }

        .btn-pay:hover {
            opacity: 0.9;
            color: white;
        }

        .sub-text {
            font-size: 0.65rem;
            color: #7a604a;
            margin-top: 0.2rem;
            margin-left: 0.5rem;
            display: block;
        }

        
        /* Guest Badges */
        .badge-guest {
            background-color: #e6d8c8;
            color: var(--brand-brown);
            padding: 0.35rem 0.75rem;
            border-radius: 50rem;
            font-size: 0.75rem;
            font-weight: 600;
            display: inline-flex;
            align-items: center;
            border: 1px solid #d0ba9f;
            text-transform: uppercase;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
            margin-right: 5px;
            margin-top: 3px;
        }
        .badge-guest i {
            margin-left: 0.5rem;
            font-size: 0.9rem;
            color: #8b6b4a;
            cursor: pointer;
            transition: color 0.2s;
        }

        .badge-guest i:hover {
            color: #d35400;
        }

        .loading-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5); /* Dimmed background */
            z-index: 9999;                  /* Sit on top of everything */
            display: flex;
            justify-content: center;
            align-items: center;
            }

            /* Simple CSS Spinner */
            .spinner {
            width: 50px;
            height: 50px;
            border: 5px solid #f3f3f3;
            border-top: 5px solid #3498db;
            border-radius: 50%;
            animation: spin 1s linear infinite;
            }

            @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
            }