:root {
                                       --bg: #F5F1E9;
                                       /* page pale background */
                                       --panel: #efe9e0;
                                       /* inner section background */
                                       --accent: #324331;
                                       /* deep green for buttons */
                                       --muted: #8590ad;
                                       /* subtitle muted */
                                       --card-shadow: 0 10px 20px rgba(18, 25, 44, 0.06);
                                       --card-radius: 12px;
                                       --card-bg: #ffffff;
                                       --beige: #FBF5EC;
                                       --shadow: 0 18px 30px rgba(16, 35, 26, 0.08);
                                   }
                                   
                                   html,
                                   body {
                                       height: 100%;
                                       background: var(--bg);
                                       font-family: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
                                       color: #28323a;
                                   }
                                   /* Top navbar simple */
                                   
                                   .site-top {
                                       background: #fbf8f5;
                                       border-bottom: 1px solid rgba(0, 0, 0, 0.05);
                                       font-family: "Playfair Display", serif;
                                   }
                                   
                                   .site-top .brand {
                                       font-family: "Playfair Display", serif;
                                       font-size: 20px;
                                       color: #314034;
                                       padding: 16px 0;
                                       letter-spacing: .3px;
                                   }
                                   /* main container panel */
                                   
                                   .hero-panel {
                                       padding: 58px 24px 80px;
                                       border-radius: 8px;
                                       box-shadow: 0 3px 0 rgba(0, 0, 0, 0.02);
                                   }
                                   /* stepper */
                                   
                                   .steps {
                                       display: flex;
                                       align-items: center;
                                       justify-content: center;
                                       gap: 28px;
                                       margin-bottom: 28px;
                                       color: #b5a9a0;
                                       font-size: 14px;
                                   }
                                   
                                   .step {
                                       display: flex;
                                       align-items: center;
                                       gap: 12px;
                                   }
                                   
                                   .step .circle {
                                       width: 36px;
                                       height: 36px;
                                       border-radius: 50%;
                                       border: 2px solid #d7cfc6;
                                       display: flex;
                                       align-items: center;
                                       justify-content: center;
                                       font-weight: 600;
                                       background: transparent;
                                   }
                                   
                                   .step.active .circle {
                                       border-color: #d78a5a;
                                       background: #fff3ea;
                                       color: #c65b24;
                                       box-shadow: 0 2px 0 rgba(198, 107, 70, 0.12);
                                   }
                                   
                                   .step .label {
                                       color: #b7a89f;
                                   }
                                   
                                   .step .actice {
                                       color: #c65b24;
                                   }
                                   
                                   .complete {
                                       border-color: #7D8965 !important;
                                       color: #7D8965 !important;
                                       font-size: 16px;
                                   }
                                   /* heading */
                                   
                                   .page-title {
                                       text-align: center;
                                       font-family: "Playfair Display", serif;
                                       font-size: 44px;
                                       margin: 4px 0 12px;
                                       color: #233329;
                                   }
                                   
                                   .page-sub {
                                       text-align: center;
                                       max-width: 720px;
                                       margin: 0 auto 34px;
                                   }
                                   /* cards grid */
                                   
                                   .area-card {
                                       border: none;
                                       border-radius: var(--card-radius);
                                       overflow: hidden;
                                       box-shadow: var(--card-shadow);
                                       background: #ffffff;
                                       display: flex;
                                       flex-direction: column;
                                       height: 100%;
                                   }
                                   
                                   .area-card .card-img-top {
                                       width: 100%;
                                       height: 100%;
                                       object-fit: cover;
                                       display: block;
                                       border-top-left-radius: var(--card-radius);
                                       border-top-right-radius: var(--card-radius);
                                       /* subtle overlay rounding on top image */
                                   }
                                   
                                   .area-body {
                                       padding: 20px;
                                       flex: 1 1 auto;
                                       display: flex;
                                       flex-direction: column;
                                       justify-content: space-between;
                                   }
                                   
                                   .area-title {
                                       font-family: "Playfair Display", serif;
                                       font-size: 20px;
                                       margin-bottom: 6px;
                                       color: #27402e;
                                   }
                                   
                                   .area-desc {
                                       color: #6f7b73;
                                       font-size: 14px;
                                       margin-bottom: 18px;
                                   }
                                   /* select button */
                                   
                                   .select-area {
                                       background: var(--accent);
                                       border: none;
                                       color: #fff;
                                       border-radius: 10px;
                                       padding: 10px 20px;
                                       width: 100%;
                                       box-shadow: 0 6px 0 rgba(0, 0, 0, 0.05);
                                   }
                                   
                                   .select-area:hover {
                                       filter: brightness(.95);
                                   }
                                   /* footer spacing for cards */
                                   
                                   .card-footer {
                                       background: transparent;
                                       border-top: 0;
                                       padding: 0;
                                       margin-top: 12px;
                                   }
                                   /* responsive tweaks */
                                   
                                   @media (max-width: 992px) {
                                       .area-card .card-img-top {}
                                       .hero-panel {
                                           padding: 40px 18px 60px;
                                       }
                                   }
                                   
                                   @media (max-width: 576px) {
                                       .page-title {
                                           font-size: 28px;
                                       }
                                       .steps {
                                           gap: 14px;
                                           font-size: 13px;
                                       }
                                   }
                                   
                                   .room-media {
                                       max-width: 600px;
                                       margin: auto;
                                       overflow: hidden;
                                       position: relative;
                                       border-radius: 0 !important;
                                   }
                                   
                                   .room-media img {
                                       transition: opacity 0.5s ease-in-out;
                                       border-radius: 0 !important;
                                   }
                                   
                                   .slider-dots {
                                       display: flex;
                                       justify-content: center;
                                   }
                                   
                                   .slider-dots .dot {
                                       width: 10px;
                                       height: 10px;
                                       border-radius: 50%;
                                       background: white;
                                       cursor: pointer;
                                       transition: background 0.3s;
                                   }
                                   
                                   .slider-dots .dot.active {
                                       background: orange;
                                   }
                                   
                                   .area-options {
                                       display: none;
                                       position: absolute;
                                       top: 100%;
                                       left: 10px;
                                       background: #fff;
                                       border: 1px solid rgba(0, 0, 0, 0.1);
                                       z-index: 10;
                                       width: 200px;
                                   }
                                   
                                   .option-item {
                                       gap: 8px;
                                       padding: 6px 10px;
                                       cursor: pointer;
                                       font-size: 15px;
                                       color: #2c4430;
                                       transition: background 0.2s;
                                   }
                                   
                                   .option-item:hover {
                                       background: #f5f5f5;
                                   }
                                   
                                   .option-item input[type="radio"] {
                                       appearance: none;
                                       width: 16px;
                                       height: 16px;
                                       border: 2px solid #2c4430;
                                       border-radius: 3px;
                                       /* مربع */
                                       position: relative;
                                       cursor: pointer;
                                   }
                                   
                                   .option-item input[type="radio"]:checked::before {
                                       content: "";
                                       position: absolute;
                                       top: 2px;
                                       left: 2px;
                                       width: 8px;
                                       height: 8px;
                                       background: #2c4430;
                                       border-radius: 2px;
                                   }
                                   /* ----------------- Summary bar (Lake View etc.) ----------------- */
                                   
                                   .summary {
                                       background: var(--card-bg);
                                       padding: 14px;
                                       display: flex;
                                       border-radius: 14px;
                                       margin: 0 !important;
                                       box-shadow: var(--shadow);
                                       margin-bottom: 22px;
                                   }
                                   
                                   .summary .item {
                                       display: flex;
                                       gap: 12px;
                                       align-items: center;
                                       background: var(--beige);
                                       min-width: 170px;
                                       max-width: 280px;
                                       border-right: solid 1px #5353531f;
                                   }
                                   
                                   .summary .item:last-child {
                                       border-right: none;
                                   }
                                   
                                   .summary .item .icon {
                                       width: 44px;
                                       height: 44px;
                                       border-radius: 10px;
                                       background: #fff;
                                       display: flex;
                                       align-items: center;
                                       justify-content: center;
                                       border: 1px solid rgba(0, 0, 0, 0.03);
                                   }
                                   
                                   .summary .item .icon svg {
                                       width: 22px;
                                       height: 22px;
                                       opacity: .18;
                                   }
                                   /* placeholder svg */
                                   
                                   .summary .item .text {
                                       display: flex;
                                       flex-direction: column;
                                   }
                                   
                                   .summary .item .text .title {
                                       font-weight: 600;
                                       color: #2C4430;
                                       font-size: 14px;
                                   }
                                   
                                   .summary .item .text .sub {
                                       color: var(--muted);
                                       font-size: 13px;
                                   }
                                   /* ----------------- Content columns ----------------- */
                                   
                                   .content-row {
                                       display: flex;
                                       align-items: flex-start;
                                   }
                                   /* fix width to match design */
                                   /* ----------------- Calendar ----------------- */
                                   
                                   .calendar-card {
                                       background: var(--card-bg);
                                       border-radius: 12px;
                                       padding: 18px;
                                       box-shadow: var(--shadow);
                                   }
                                   
                                   .calendar-title {
                                       font-family: "Playfair Display", serif;
                                       font-size: 18px;
                                       margin-bottom: 6px;
                                       color: #233329;
                                   }
                                   
                                   .calendar-month {
                                       color: var(--muted);
                                       margin-bottom: 12px;
                                       font-size: 14px;
                                   }
                                   
                                   .calendar-grid {
                                       display: grid;
                                       grid-template-columns: repeat(7, 1fr);
                                       gap: 8px;
                                       align-items: center;
                                   }
                                   
                                   .cal-cell {
                                       background: #fff;
                                       border-radius: 8px;
                                       font-size: 13px;
                                       min-height: 62px;
                                       display: flex;
                                       flex-direction: column;
                                       align-items: center;
                                       justify-content: center;
                                       cursor: pointer;
                                       transition: transform .12s ease, box-shadow .12s ease;
                                   }
                                   
                                   .cal-cell small {
                                       display: block;
                                       margin-top: 6px;
                                       font-size: 12px;
                                       color: var(--muted);
                                   }
                                   
                                   .cal-available small {
                                       color: #16A34A;
                                   }
                                   
                                   .cal-booked {
                                       background: #FEE2E2;
                                       color: #EF4444;
                                   }
                                   
                                   .cal-booked small {
                                       color: #EF4444;
                                   }
                                   
                                   .cal-selected {
                                       background: #C96E3B33;
                                       color: #C96E3B;
                                       transform: translateY(-3px);
                                   }
                                   
                                   .cal-selected small {
                                       color: #c65b24;
                                       transform: translateY(-3px);
                                   }
                                   
                                   .legend {
                                       display: flex;
                                       gap: 12px;
                                       margin-top: 12px;
                                       font-size: 13px;
                                       color: var(--muted);
                                   }
                                   
                                   .legend .dot {
                                       width: 12px;
                                       height: 12px;
                                       border-radius: 50%;
                                       display: inline-block;
                                       margin-right: 8px;
                                   }
                                   
                                   .btn-outline-custom {
                                       border-radius: 10px;
                                       padding: 8px 12px;
                                       background-color: #7A8A601A;
                                       color: #7A8A60;
                                   }
                                   /* ----------------- Rooms ----------------- */
                                   
                                   .rooms-list {
                                       display: flex;
                                       flex-direction: column;
                                       gap: 18px;
                                   }
                                   
                                   .room-card {
                                       background: var(--card-bg);
                                       border-radius: 14px;
                                       box-shadow: var(--shadow);
                                       padding: 16px;
                                       display: flex;
                                       gap: 18px;
                                       align-items: stretch;
                                       overflow: hidden;
                                       transition: box-shadow .18s ease, transform .12s ease;
                                       min-height: 260px;
                                   }
                                   
                                   .room-card:hover {
                                       transform: translateY(-4px);
                                       box-shadow: 0 20px 40px rgba(18, 25, 44, 0.10);
                                   }
                                   
                                   .room-media {
                                       flex: 0 0 280px;
                                       min-height: 220px;
                                       max-height: 280px;
                                       overflow: hidden;
                                       position: relative;
                                       border-radius: 12px;
                                       align-self: stretch;
                                       display: flex;
                                       justify-content: center;
                                   }
                                   
                                   .area-options {
                                       display: none;
                                       position: absolute;
                                       top: 100%;
                                       left: 10px;
                                       background: #fff;
                                       border: 1px solid rgba(0, 0, 0, 0.1);
                                       z-index: 10;
                                       width: 200px;
                                   }
                                   
                                   .option-item {
                                       gap: 8px;
                                       padding: 6px 10px;
                                       cursor: pointer;
                                       font-size: 15px;
                                       color: #2c4430;
                                       transition: background 0.2s;
                                   }
                                   
                                   .option-item:hover {
                                       background: #f5f5f5;
                                   }
                                   
                                   .option-item input[type="radio"] {
                                       appearance: none;
                                       width: 16px;
                                       height: 16px;
                                       border: 2px solid #2c4430;
                                       border-radius: 3px;
                                       /* مربع */
                                       position: relative;
                                       cursor: pointer;
                                   }
                                   
                                   .option-item input[type="radio"]:checked::before {
                                       content: "";
                                       position: absolute;
                                       top: 2px;
                                       left: 2px;
                                       width: 8px;
                                       height: 8px;
                                       background: #2c4430;
                                       border-radius: 2px;
                                   }
                                   
                                   .room-media img {
                                       width: 100%;
                                       height: 100%;
                                       object-fit: cover;
                                       display: block;
                                   }
                                   
                                   .room-media .slider-dots {
                                       position: absolute;
                                       bottom: 14px;
                                       left: 50%;
                                       transform: translateX(-50%);
                                       display: flex;
                                       gap: 6px;
                                       padding: 4px 12px;
                                       border-radius: 999px;
                                       background: rgba(0, 0, 0, 0.25);
                                   }
                                   
                                   .room-body {
                                       flex: 1 1 auto;
                                       display: flex;
                                       flex-direction: column;
                                   }
                                   
                                   .room-title {
                                       font-family: "Playfair Display", serif;
                                       font-size: 18px;
                                       color: #22382e;
                                       margin-bottom: 6px;
                                   }
                                   
                                   .room-meta {
                                       color: var(--muted);
                                       font-size: 13px;
                                       margin-bottom: 8px;
                                       display: flex;
                                       align-items: center;
                                       gap: 12px;
                                       flex-wrap: wrap;
                                   }
                                   
                                   .room-meta span {
                                       display: inline-flex;
                                       align-items: center;
                                       gap: 6px;
                                       color: inherit;
                                   }
                                   
                                   .room-desc {
                                       color: #57675f;
                                       font-size: 14px;
                                       margin-bottom: 12px;
                                       flex: 0 0 auto;
                                   }
                                   
                                   .room-actions {
                                       display: flex;
                                       justify-content: space-between;
                                       align-items: center;
                                       gap: 12px;
                                       margin-top: auto;
                                   }
                                   
                                   .price {
                                       font-weight: 700;
                                       color: var(--accent);
                                       font-size: 20px;
                                   }
                                   
                                   .select-room {
                                       background: #C96E3B;
                                       color: #fff;
                                       border-radius: 10px;
                                       padding: 8px 14px;
                                       border: none;
                                       box-shadow: 0 6px 0 rgba(0, 0, 0, 0.04);
                                       cursor: pointer;
                                   }
                                   
                                   .select-room.selected {
                                       background: #f2c9a8;
                                       color: #8b3b15;
                                       transform: translateY(-2px);
                                       box-shadow: 0 8px 0 rgba(0, 0, 0, 0.06);
                                   }
                                   
                                   .item {
                                       position: relative;
                                       /* برای اینکه dropdown نسبت به همین بخش تنظیم شه */
                                       display: inline-block;
                                   }
                                   
                                   .options-box {
                                       position: absolute;
                                       top: 0;
                                       background: #fff;
                                       border: 1px solid #ddd;
                                       border-radius: 8px;
                                       padding: 8px 10px;
                                       display: none;
                                       z-index: 100;
                                       box-shadow: 0 4px 10px rgba(0, 0, 0, 0.171);
                                       min-width: 200px;
                                   }
                                   
                                   .option-item {
                                       padding: 6px 0;
                                       cursor: pointer;
                                       font-size: 14px;
                                   }
                                   
                                   .option-item:hover {
                                       color: #007bff;
                                   }
                                   /* مخفی‌کردن رادیو اصلی */
                                   
                                   .option-item input[type="radio"] {
                                       appearance: none;
                                       width: 16px;
                                       height: 16px;
                                       border: 2px solid #E5E7EB;
                                       border-radius: 3px;
                                       /* مربع با گوشه‌های کمی نرم */
                                       cursor: pointer;
                                       float: inline-end;
                                       position: relative;
                                       transition: all 0.2s ease;
                                   }
                                   /* حالت انتخاب‌شده */
                                   
                                   .option-item input[type="radio"]:checked {
                                       background-color: #2C4430;
                                       border-color: #2C4430;
                                       float: right;
                                   }
                                   
                                   .item {
                                       position: relative;
                                       display: inline-block;
                                   }
                                   
                                   .item {
                                       position: relative;
                                   }
                                   
                                   .guest-options {
                                       display: none;
                                       position: absolute;
                                       top: 100%;
                                       left: 10px;
                                       background: #fff;
                                       border: 1px solid rgba(0, 0, 0, 0.1);
                                       z-index: 10;
                                       width: 220px;
                                   }
                                   
                                   .guest-row {
                                       font-size: 15px;
                                       color: #2c4430;
                                   }
                                   
                                   .counter {
                                       display: flex;
                                       align-items: center;
                                       gap: 8px;
                                   }
                                   
                                   .counter button {
                                       width: 26px;
                                       height: 26px;
                                       border: none;
                                       background: transparent;
                                       color: #2c4430;
                                       border-radius: 6px;
                                       font-size: 18px;
                                       line-height: 1;
                                       cursor: pointer;
                                       transition: 0.2s;
                                   }
                                   
                                   .count {
                                       width: 20px;
                                       text-align: center;
                                       font-weight: 500;
                                       border: 1px solid #E5E7EB;
                                       border-radius: 4px;
                                       text-align: center;
                                   }
                                   
                                   .guests-toggle {
                                       cursor: pointer;
                                       font-weight: 600;
                                   }
                                   
                                   .date-box {
                                       position: absolute;
                                       top: 0;
                                       background: #fff;
                                       border: 1px solid #ddd;
                                       border-radius: 8px;
                                       padding: 10px 12px;
                                       display: none;
                                       z-index: 100;
                                       box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
                                       min-width: 180px;
                                   }
                                   
                                   .date-box input[type="date"] {
                                       width: 100%;
                                       padding: 6px;
                                       margin-bottom: 6px;
                                       border: 1px solid #ccc;
                                       border-radius: 5px;
                                       font-size: 14px;
                                       color: #2C4430;
                                   }
                                   
                                   .summary .item {
                                       cursor: pointer;
                                   }
                                   
                                   .confirmation-container {
                                       max-width: 800px;
                                       margin: 40px auto;
                                       background: white;
                                       border-radius: 12px;
                                       box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
                                       overflow: hidden;
                                   }
                                   
                                   .header-section {
                                       padding: 30px;
                                       text-align: center;
                                   }
                                   
                                   .thank-you {
                                       font-size: 2.2rem;
                                       font-weight: 700;
                                       margin-bottom: 15px;
                                   }
                                   
                                   .confirmation-text {
                                       font-size: 1.1rem;
                                       opacity: 0.9;
                                   }
                                   
                                   .summary-section {
                                       padding: 30px;
                                   }
                                   
                                   .section-title {
                                       font-weight: 600;
                                       color: #2C4430;
                                       margin-bottom: 20px;
                                       padding-bottom: 10px;
                                   }
                                   
                                   .booking-details {
                                       display: grid;
                                       grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
                                       gap: 20px;
                                       margin-bottom: 30px;
                                   }
                                   
                                   .detail-card {
                                       border-radius: 8px;
                                       padding: 15px;
                                   }
                                   
                                   .detail-label {
                                       font-size: 0.9rem;
                                       color: #666;
                                       margin-bottom: 5px;
                                   }
                                   
                                   .detail-value {
                                       font-size: 1.1rem;
                                       font-weight: 600;
                                       color: #333;
                                   }
                                   
                                   .experiences-table {
                                       width: 100%;
                                       border-collapse: collapse;
                                       margin-bottom: 30px;
                                   }
                                   
                                   .experiences-table th {
                                       text-align: left;
                                       padding: 12px 15px;
                                       font-weight: 600;
                                       color: #2C4430;
                                   }
                                   
                                   .experiences-table td {
                                       padding: 12px 0;
                                   }
                                   
                                   .total-amount {
                                       background: #E5E7EB;
                                       display: flex;
                                       justify-content: space-between;
                                       padding: 20px;
                                       border-radius: 8px;
                                       text-align: center;
                                       align-items: center;
                                       margin-top: 20px;
                                   }
                                   
                                   .total-label {
                                       font-size: 1.1rem;
                                       color: #666;
                                       margin-bottom: 5px;
                                   }
                                   
                                   .total-value {
                                       font-size: 2rem;
                                       font-weight: 700;
                                       color: #2C4430;
                                   }
                                   
                                   .action-buttons {
                                       display: flex;
                                       justify-content: center;
                                       gap: 15px;
                                       margin-top: 30px;
                                       flex-wrap: wrap;
                                   }
                                   
                                   .btn-custom {
                                       padding: 12px 25px;
                                       border-radius: 6px;
                                       font-weight: 600;
                                       transition: all 0.3s ease;
                                   }
                                   
                                   .btn-primary-custom {
                                       background-color: #C96E3B;
                                       border: none;
                                       color: white;
                                   }
                                   
                                   .btn-primary-custom:hover {
                                       background-color: #df5709;
                                       transform: translateY(-2px);
                                   }
                                   
                                   .btn-outline-custom {
                                       border: 2px solid #E5E7EB;
                                       color: #333333;
                                       background: #F3F4F6;
                                   }
                                   
                                   .btn-outline-custom:hover {
                                       background-color: var(--primary-color);
                                       transition: 0.4s ease-in-out;
                                       color: #c65b24;
                                   }
                                   
                                   .contact-info {
                                       text-align: center;
                                       margin-top: 30px;
                                       padding-top: 20px;
                                       border-top: 1px solid #eee;
                                       color: #666;
                                   }
                                   
                                   .footer-link-2 {
                                       color: #C96E3B;
                                       text-decoration: none;
                                   }
                                   
                                   @media (max-width: 576px) {
                                       .summary {
                                           padding: 5px;
                                       }
                                       .confirmation-container {
                                           margin: 20px 10px;
                                       }
                                       .header-section {
                                           padding: 20px;
                                       }
                                       .thank-you {
                                           font-size: 1.8rem;
                                       }
                                       .action-buttons {
                                           flex-direction: column;
                                       }
                                       .btn-custom {
                                           width: 100%;
                                       }
                                   }
                                   
                                   .footer {
                                       background-color: #2C4430;
                                       color: white;
                                       padding: 40px 0 20px;
                                       margin-top: auto;
                                   }
                                   
                                   .footer-content {
                                       max-width: 1200px;
                                       margin: 0 auto;
                                       padding: 0 20px;
                                   }
                                   
                                   .footer-brand {
                                       text-align: center;
                                       margin-bottom: 30px;
                                   }
                                   
                                   .footer-divider {
                                       height: 2px;
                                       background: linear-gradient(90deg, transparent, var(--accent-color), transparent);
                                       margin: 30px 0;
                                   }
                                   
                                   .footer-copyright {
                                       text-align: center;
                                       font-size: 0.95rem;
                                       opacity: 0.8;
                                       color: #9CA3AF;
                                       padding-top: 15px;
                                       border-top: 1px solid rgba(255, 255, 255, 0.1);
                                   }
                                   
                                   .footer-links {
                                       display: flex;
                                       justify-content: center;
                                       gap: 30px;
                                       flex-wrap: wrap;
                                       margin-bottom: 30px;
                                   }
                                   
                                   .footer-link {
                                       color: white;
                                       text-decoration: none;
                                       transition: all 0.3s ease;
                                       font-weight: 500;
                                   }
                                   
                                   .footer-link:hover {
                                       color: var(--accent-color);
                                   }
                                   
                                   .social-links {
                                       display: flex;
                                       justify-content: center;
                                       gap: 15px;
                                       margin-bottom: 30px;
                                   }
                                   
                                   .social-icon {
                                       display: flex;
                                       align-items: center;
                                       justify-content: center;
                                       width: 40px;
                                       height: 40px;
                                       background-color: rgba(255, 255, 255, 0.1);
                                       border-radius: 50%;
                                       color: white;
                                       text-decoration: none;
                                       transition: all 0.3s ease;
                                   }
                                   
                                   .social-icon:hover {
                                       background-color: var(--accent-color);
                                       transform: translateY(-3px);
                                   }
                                   
                                   .footer-links {
                                       flex-direction: column;
                                       align-items: center;
                                       gap: 15px;
                                   }
                                   
                                   .circlegrid {
                                       width: 80px;
                                       height: 2px;
                                       background: #e6dfd6;
                                       border-radius: 2px;
                                   }
                                   
                                   .cal-cell.cal-selected+.cal-cell.cal-selected {
                                       border-top-left-radius: 0 !important;
                                       border-bottom-left-radius: 0 !important;
                                   }
                                   /* گوشه سمت راست گروه */
                                   
                                   .cal-cell.cal-selected:not(:has(+ .cal-cell.cal-selected)) {
                                       border-top-right-radius: 20px !important;
                                       border-bottom-right-radius: 20px !important;
                                   }
                                   /* گوشه سمت چپ گروه */
                                   
                                   .cal-cell.cal-selected:not(.cal-cell.cal-selected + .cal-cell.cal-selected) {
                                       border-top-left-radius: 20px !important;
                                       border-bottom-left-radius: 20px !important;
                                   }
                                   /* وسطی‌ها (بین دو تا سلکت‌شده) */
                                   
                                   .cal-cell.cal-selected+.cal-cell.cal-selected+.cal-cell.cal-selected {
                                       border-radius: 0 !important;
                                   }
                                   .areas-grid h5.area-title {
    margin-bottom: 15px;
}