/* === Custom Frontend Styles === */

/* Lazy Loading */
.lazy-section { min-height: 100px; position: relative; }
.lazy-spinner { display: flex; align-items: center; justify-content: center; padding: 60px 0; }
.spinner { width: 40px; height: 40px; border: 4px solid #e2e8f0; border-top-color: #BD8C03; border-radius: 50%; }

/* About Section (desktop) */
#about { overflow: hidden; }
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: stretch; }
.about-media { position: relative; display: flex; flex-direction: column; }
.about-media-main { position: relative; border-radius: 16px; overflow: hidden; box-shadow: 0 20px 50px rgba(0,0,0,0.08); flex: 1; }
.about-media-main img { width: 100%; height: 100%; display: block; object-fit: cover; min-height: 420px; }
.about-media-shine { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(189,140,3,0.08), transparent 45%, rgba(255,255,255,0.06) 90%); pointer-events: none; }
.about-media-card { position: absolute; right: -20px; bottom: -20px; width: 180px; border-radius: 12px; overflow: hidden; box-shadow: 0 15px 40px rgba(0,0,0,0.12); border: 3px solid #fff; z-index: 2; }
.about-media-card img { width: 100%; height: auto; display: block; }
.about-media-badge { position: absolute; top: 24px; left: 24px; background: linear-gradient(135deg, #BD8C03, #dbaa24); padding: 12px 18px; border-radius: 10px; text-align: center; z-index: 3; box-shadow: 0 8px 30px rgba(189,140,3,0.3); }
.amb-num { display: block; font-size: 26px; font-weight: 800; color: #fff; line-height: 1; }
.amb-lbl { display: block; font-size: 9px; font-weight: 600; color: rgba(255,255,255,0.9); text-transform: uppercase; letter-spacing: 1px; margin-top: 2px; line-height: 1.3; }
.about-media-round { position: absolute; top: 30px; right: 30px; width: 100px; height: 100px; z-index: 2; margin: 0; animation: abtSpin 12s linear infinite; }
.about-media-round img { width: 100%; height: auto; display: block; }
.about-media-round::before { content: ''; position: absolute; inset: 50%; transform: translate(-50%, -50%); width: 28px; height: 28px; background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNCOEMwMyIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxjaXJjbGUgY3g9IjEyIiBjeT0iMTIiIHI9IjEwIi8+PHBvbHlsaW5lIHBvaW50cz0iMTIgNiAxMiAxMiAxNiAxNCIvPjwvc3ZnPg==) center/contain no-repeat; z-index: 1; pointer-events: none; }
@keyframes abtSpin { to { transform: rotate(360deg); } }
.about-body { display: flex; flex-direction: column; justify-content: center; padding: 10px 0; }
.about-body-label { display: inline-flex; align-items: center; gap: 10px; color: #BD8C03; font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 14px; flex-shrink: 0; }
.about-body-label::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #BD8C03; }
.about-body-title { font-size: 34px; font-weight: 700; color: #0f172a; line-height: 1.15; margin-bottom: 18px; letter-spacing: -1.2px; flex-shrink: 0; }
.about-body-text { flex: 1; font-size: 15px; line-height: 1.75; color: #64748b; margin-bottom: 20px; }
.about-body-text p { margin-bottom: 10px; }
.about-body-features { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin-bottom: 28px; flex-shrink: 0; }
.abf-item { display: flex; align-items: center; gap: 10px; padding: 14px 16px; background: #f8fafc; border-radius: 8px; border: 1px solid #f1f5f9; transition: all 0.25s ease; }
.abf-item:hover { background: #fff; border-color: #e2e8f0; box-shadow: 0 2px 8px rgba(0,0,0,0.04); }
.abf-item i { color: #BD8C03; font-size: 18px; flex-shrink: 0; }
.abf-item span { font-size: 13px; font-weight: 600; color: #1e293b; line-height: 1.3; }
.about-body-actions { display: flex; gap: 14px; flex-wrap: wrap; flex-shrink: 0; }
.about-body-btn { display: inline-flex; align-items: center; gap: 8px; background: #fff; color: #222; padding: 0 32px; height: 45px; border-radius: 2px; font-weight: 500; font-size: 16px; text-decoration: none; border: 2px solid #d4d4d4; transition: all 0.3s ease; position: relative; overflow: hidden; }
.about-body-btn:hover { border-color: #BD8C03; color: #BD8C03; }
@media (max-width: 991px) { .about-grid { grid-template-columns: 1fr; gap: 40px; } .about-media-card { width: 140px; right: -10px; bottom: -10px; } .about-body-title { font-size: 26px; } }

/* Booking Page */
#booking-page { background: #fff; position: relative; overflow: hidden; padding-top: 60px; padding-bottom: 0; }
#booking-page::before { content: ''; position: absolute; top: -30%; right: -20%; width: 700px; height: 700px; border-radius: 50%; background: radial-gradient(circle, rgba(189,140,3,0.04), transparent 70%); pointer-events: none; }
.booking-page-form { max-width: 960px; margin: 0 auto; padding: 0 16px; }
.booking-form-inner { background: #f8fafc; border: 1px solid #f1f5f9; border-radius: 16px; padding: 36px; }
.bf-section { margin-bottom: 28px; padding-bottom: 28px; border-bottom: 1px solid #e2e8f0; }
.bf-section:last-of-type { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.bf-section-title { font-size: 16px; font-weight: 700; color: #0f172a; margin-bottom: 16px; padding-left: 12px; border-left: 3px solid #BD8C03; }
.form-group { margin-bottom: 0; }
.form-group label { font-size: 13px; font-weight: 600; color: #334155; margin-bottom: 6px; display: block; }
.form-control { border: 1px solid #e2e8f0; border-radius: 10px; height: 46px; font-size: 14px; color: #1e293b; background: #fff; padding: 0 16px; transition: all 0.25s ease; width: 100%; outline: none; box-shadow: none; }
.form-control:focus { border-color: #BD8C03; box-shadow: 0 0 0 3px rgba(189,140,3,0.1); }
textarea.form-control { padding: 12px 16px; height: 90px; resize: vertical; }
select.form-control { appearance: auto; cursor: pointer; }
.date-picker, .time-picker { background: #fff; cursor: pointer; }
.bf-add-btn { width: 46px; height: 46px; border-radius: 10px; border: 2px solid #BD8C03; background: rgba(189,140,3,0.08); color: #BD8C03; font-size: 22px; font-weight: 700; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.25s ease; }
.bf-add-btn:hover { background: #BD8C03; color: #fff; }
.bf-add-btn.remove-address { border-color: #fecaca; color: #ef4444; font-size: 28px; }
.bf-add-btn.remove-address:hover { border-color: #ef4444; background: #fef2f2; }
.bf-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: nowrap; margin-top: 24px; padding-top: 24px; border-top: 1px solid #e2e8f0; }
.bf-recaptcha { flex-shrink: 0; }
.default-btn { background: linear-gradient(135deg, #BD8C03, #dbaa24); color: #fff; padding: 0 36px; height: 48px; border-radius: 10px; font-weight: 600; font-size: 15px; border: none; display: inline-flex; align-items: center; gap: 8px; box-shadow: 0 8px 25px rgba(189,140,3,0.25); transition: all 0.3s ease; cursor: pointer; text-decoration: none; white-space: nowrap; }
.default-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 35px rgba(189,140,3,0.35); color: #fff; }
.row { margin-bottom: 0; }
.row > [class*="col-"] { padding-bottom: 0; }
.g-3 { --bs-gutter-y: 12px; }
@media (max-width: 991px) { .booking-form-inner { padding: 28px; } .bf-footer { gap: 12px; } .bf-recaptcha { transform: scale(0.85); transform-origin: left center; } .default-btn { padding: 0 24px; font-size: 14px; } }
@media (max-width: 767px) { #booking-page { padding-top: 40px; } .booking-page-form { padding: 0 12px; } .booking-form-inner { padding: 20px 16px; border-radius: 12px; } .bf-section { margin-bottom: 20px; padding-bottom: 20px; } .bf-footer { gap: 10px; } .bf-recaptcha { transform: scale(0.75); transform-origin: left center; } .form-control { height: 42px; font-size: 13px; } .default-btn { height: 42px; font-size: 13px; padding: 0 18px; white-space: nowrap; } .g-3 { --bs-gutter-y: 8px; } }
@media (max-width: 480px) { .booking-form-inner { padding: 16px 12px; } .bf-section-title { font-size: 14px; } .bf-recaptcha { transform: scale(0.65); transform-origin: left center; } .default-btn { padding: 0 12px; font-size: 12px; height: 38px; } }

/* Contact Page */
#contact-page { background: #fff; position: relative; overflow: hidden; }
#contact-page::before { content: ''; position: absolute; top: -30%; right: -20%; width: 600px; height: 600px; border-radius: 50%; background: radial-gradient(circle, rgba(189,140,3,0.04), transparent 70%); pointer-events: none; }
.contact-info-card { background: #f8fafc; border-radius: 16px; padding: 40px 36px; border: 1px solid #f1f5f9; height: 100%; }
.contact-info-card h2 { font-size: 32px; font-weight: 700; color: #0f172a; margin-bottom: 12px; }
.contact-info-card h2 span { color: #BD8C03; }
.contact-info-desc { font-size: 15px; line-height: 1.7; color: #64748b; margin-bottom: 28px; }
.contact-info-items { display: flex; flex-direction: column; gap: 20px; }
.contact-info-item { display: flex; align-items: flex-start; gap: 16px; }
.cii-icon { width: 48px; height: 48px; border-radius: 12px; background: rgba(189,140,3,0.1); display: flex; align-items: center; justify-content: center; font-size: 20px; color: #BD8C03; flex-shrink: 0; }
.cii-text span { display: block; font-size: 12px; font-weight: 600; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 2px; }
.cii-text p { font-size: 15px; font-weight: 500; color: #1e293b; margin: 0; line-height: 1.4; }
.contact-form-card { padding: 10px 0; }
.contact-form-card h3 { font-size: 24px; font-weight: 700; color: #0f172a; margin-bottom: 24px; }
.cf-input { width: 100%; height: 50px; border: 1px solid #e2e8f0; border-radius: 10px; padding: 0 16px; font-size: 14px; color: #1e293b; background: #fff; transition: all 0.25s ease; outline: none; }
.cf-input:focus { border-color: #BD8C03; box-shadow: 0 0 0 3px rgba(189,140,3,0.1); }
.cf-input::placeholder { color: #94a3b8; }
.cf-textarea { height: 120px; padding: 14px 16px; resize: vertical; }
.cf-submit { display: inline-flex; align-items: center; gap: 8px; background: linear-gradient(135deg, #BD8C03, #dbaa24); color: #fff; padding: 0 36px; height: 50px; border-radius: 10px; font-weight: 600; font-size: 15px; border: none; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 8px 25px rgba(189,140,3,0.25); }
.cf-submit:hover { transform: translateY(-2px); box-shadow: 0 12px 35px rgba(189,140,3,0.35); }
.cf-submit i { font-size: 18px; }
@media (max-width: 767px) { .contact-info-card { padding: 28px 24px; } }

/* Blog Grid */
.blog-grid-card { background:#fff; border-radius:16px; overflow:hidden; box-shadow:0 1px 3px rgba(0,0,0,0.06); transition:all 0.35s cubic-bezier(.165,.85,.45,1); height:100%; border:1px solid #f1f3f5; }
.blog-grid-card:hover { transform:translateY(-6px); box-shadow:0 20px 60px rgba(0,0,0,0.1); border-color:rgba(189,140,3,0.15); }
.blog-grid-card .blog-img { height:220px; background-size:cover; background-position:center; position:relative; overflow:hidden; }
.blog-grid-card .blog-img .blog-date { position:absolute; bottom:16px; left:16px; background:rgba(0,0,0,0.6); color:#fff; padding:6px 14px; border-radius:8px; font-size:12px; font-weight:500; backdrop-filter:blur(4px); display:flex; align-items:center; gap:6px; }
.blog-grid-card .blog-body { padding:24px; }
.blog-grid-card .blog-body h3 { font-size:18px; font-weight:700; color:#1a1a2e; margin-bottom:8px; line-height:1.35; }
.blog-grid-card .blog-body h3 a { color:inherit; text-decoration:none; transition:color 0.3s; }
.blog-grid-card .blog-body h3 a:hover { color:#BD8C03; }
.blog-grid-card .blog-body .blog-meta { font-size:13px; color:#94a3b8; margin-bottom:12px; display:flex; align-items:center; gap:16px; }
.blog-grid-card .blog-body .blog-excerpt { font-size:14px; color:#64748b; line-height:1.6; margin-bottom:16px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.blog-grid-card .blog-body .blog-link { display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:600; color:#BD8C03; text-decoration:none; transition:gap 0.3s; }
.blog-grid-card .blog-body .blog-link:hover { gap:14px; }
.loading-spinner { text-align:center; padding:40px 0; color:#94a3b8; }
.loading-spinner .spinner { width:36px; height:36px; border:3px solid #f1f5f9; border-top-color:#BD8C03; border-radius:50%; margin:0 auto 12px; }
.end-message { text-align:center; padding:30px 0; color:#94a3b8; font-size:14px; }

/* Service Grid */
.service-grid-item { background:#fff; border-radius:16px; overflow:hidden; box-shadow:0 1px 3px rgba(0,0,0,0.06); transition:all 0.35s cubic-bezier(.165,.85,.45,1); height:100%; border:1px solid #f1f3f5; }
.service-grid-item:hover { transform:translateY(-6px); box-shadow:0 20px 60px rgba(0,0,0,0.1); border-color:rgba(189,140,3,0.15); }
.service-grid-item .service-img { height:220px; background-size:cover; background-position:center; position:relative; overflow:hidden; }
.service-grid-item .service-img::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg,transparent 50%,rgba(0,0,0,0.4)); }
.service-grid-item .service-img .service-icon-overlay { position:absolute; bottom:16px; right:16px; width:50px; height:50px; background:linear-gradient(135deg,#BD8C03,#dbaa24); border-radius:12px; display:flex; align-items:center; justify-content:center; z-index:2; box-shadow:0 4px 15px rgba(189,140,3,0.3); }
.service-grid-item .service-body { padding:24px; }
.service-grid-item .service-body h3 { font-size:20px; font-weight:700; color:#1a1a2e; margin-bottom:8px; line-height:1.3; }
.service-grid-item .service-body h3 a { color:inherit; text-decoration:none; transition:color 0.3s; }
.service-grid-item .service-body h3 a:hover { color:#BD8C03; }
.service-grid-item .service-body p { font-size:15px; color:#64748b; line-height:1.6; margin-bottom:20px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.service-grid-item .service-body .service-link { display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:600; color:#BD8C03; text-decoration:none; transition:gap 0.3s; }
.service-grid-item .service-body .service-link:hover { gap:14px; }

/* Page Header (shared) */
.page-header { background:#222; background-image:radial-gradient(ellipse at 20% 50%, rgba(189,140,3,0.12) 0%, transparent 60%); padding:80px 0 60px; text-align:center; position:relative; }
.page-header h1 { color:#fff; font-size:42px; font-weight:700; margin-bottom:12px; letter-spacing:-0.5px; }
.page-header p { color:rgba(255,255,255,0.65); font-size:17px; max-width:600px; margin:0 auto; }
@media (max-width:768px) { .blog-grid-card .blog-img { height:180px; } .service-grid-item .service-img { height:180px; } .page-header h1 { font-size:32px; } .page-header { padding:60px 0 40px; } }

/* Terms Page */
.terms-hero { background:#222; background-image:radial-gradient(ellipse at 20% 50%, rgba(189,140,3,0.12) 0%, transparent 60%); padding:80px 0 60px; text-align:center; position:relative; }
.terms-hero h1 { color:#fff; font-size:42px; font-weight:700; margin-bottom:8px; letter-spacing:-0.5px; }
.terms-hero p { color:rgba(255,255,255,0.65); font-size:16px; }
.terms-content { background:#f8f9fb; padding:80px 0; }
.terms-card { background:#fff; border-radius:20px; box-shadow:0 4px 30px rgba(0,0,0,0.06); border:1px solid #f1f3f5; padding:60px; max-width:860px; margin:0 auto; font-size:16px; line-height:1.8; color:#475569; }
.terms-card h1, .terms-card h2, .terms-card h3, .terms-card h4 { color:#1a1a2e; margin-top:28px; margin-bottom:12px; }
.terms-card h2 { font-size:24px; font-weight:700; }
.terms-card h3 { font-size:20px; font-weight:600; }
.terms-card p { margin-bottom:16px; color:#475569; }
.terms-card ul, .terms-card ol { margin-bottom:16px; padding-left:24px; }
.terms-card li { margin-bottom:6px; }
.terms-card a { color:#BD8C03; text-decoration:underline; }
.terms-card a:hover { color:#a67a03; }
.terms-card strong { color:#1a1a2e; }
@media(max-width:768px) { .terms-hero h1 { font-size:32px; } .terms-hero { padding:60px 0 40px; } .terms-card { padding:24px 20px; border-radius:16px; } .terms-content { padding:40px 0; } }

/* Post Thumb */
.post-thumb { overflow: hidden; }
.post-thumb img { width: 100%; height: 220px; object-fit: cover; display: block; }

/* Service Thumb */
.service-thumb { overflow: hidden; height: 220px; }
.service-thumb img { width: 100%; height: 100%; object-fit: cover; }

/* About Partial Animations */
@keyframes floatBadge { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes floatCard { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* Wizard */
.wizard-progress { display: flex; gap: 8px; margin-bottom: 24px; align-items: center; }
.wp-step { width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,0.15); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; color: rgba(255,255,255,0.5); transition: all 0.3s; position: relative; }
.wp-step.active { background: #BD8C03; color: #fff; box-shadow: 0 4px 15px rgba(189,140,3,0.3); }
.wp-step.done { background: rgba(255,255,255,0.25); color: #fff; }
.wp-step:not(:last-child)::after { content: ''; position: absolute; left: 100%; top: 50%; width: 20px; height: 2px; background: rgba(255,255,255,0.15); }
.wp-step.active::after, .wp-step.done::after { background: rgba(189,140,3,0.4); }
.wizard-step-title { font-size: 20px; font-weight: 600; color: #fff; margin-bottom: 20px; }
.wizard-nav { display: flex; gap: 12px; margin-top: 24px; }
.wizard-summary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.wsg-col { background: rgba(255,255,255,0.08); border-radius: 6px; padding: 12px 16px; }
.wsg-col h5 { color: #BD8C03; font-size: 13px; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px; font-weight: 600; }
.wsg-data { color: #fff; font-size: 14px; line-height: 1.5; }
.wsg-data p { margin-bottom: 2px; }
.wsg-data strong { color: #fff; font-weight: 500; opacity: 0.7; }