/* ========================================================================
   SNC brand theme overrides for the static "home" site.
   Loaded after bootstrap.min.css / style.css so these rules win.
   Reuses the same color language as bookingv4.php / sendslipv4.php.
   ======================================================================== */

:root{
	--primary: #0f6e8c;
	--snc-primary: #0f6e8c;
	--snc-primary-dark: #0a4d63;
	--snc-primary-light: #e7f5f8;
	--snc-accent: #17b3c9;
	--snc-success: #1aa260;
	--snc-warning: #e08a00;
	--snc-danger: #e5484d;
	--snc-bg: #f3f6f9;
	--snc-border: #e3e9ee;
}

body{ font-family:"Segoe UI","Sarabun","Prompt",Tahoma,sans-serif; }

/* ---- Re-skin the template's Bootstrap "primary" color (hardcoded in bootstrap.min.css) ---- */
.bg-primary{ background-color: var(--snc-primary) !important; }
.text-primary{ color: var(--snc-primary) !important; }
.border-primary{ border-color: var(--snc-primary) !important; }

.btn-primary{
	background-color: var(--snc-primary);
	border-color: var(--snc-primary);
	background-image: linear-gradient(135deg, var(--snc-primary), var(--snc-accent));
	box-shadow: 0 4px 12px rgba(15,110,140,.25);
}
.btn-primary:hover, .btn-primary:focus{
	background-color: var(--snc-primary-dark);
	border-color: var(--snc-primary-dark);
	filter: brightness(1.05);
}
.btn-outline-primary{ color: var(--snc-primary); border-color: var(--snc-primary); }
.btn-outline-primary:hover{ background-color: var(--snc-primary); border-color: var(--snc-primary); }

/* ---- Navbar ---- */
.navbar.bg-primary{
	background: linear-gradient(135deg, var(--snc-primary-dark), var(--snc-primary)) !important;
}
.navbar-dark .navbar-nav .nav-link{ opacity:.92; font-weight:500; }
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link.active{ opacity:1; text-decoration: underline; text-underline-offset:6px; }

.top-bar .btn-lg-square{ color: var(--snc-primary); }

/* ---- Cards / sections ---- */
.snc-section{ padding: 2.5rem 0; }
.snc-card{
	background:#fff;
	border:1px solid var(--snc-border);
	border-radius:16px;
	box-shadow:0 4px 18px rgba(15,60,80,.05);
	padding:1.75rem;
}

/* ---- Announcement / notice list (replaces raw <font color> blocks) ---- */
.snc-notice{
	background:#fff;
	border:1px solid var(--snc-border);
	border-left:4px solid var(--snc-primary);
	border-radius:12px;
	padding:1.25rem 1.5rem;
	margin-bottom:1rem;
}
.snc-notice h5{ color:var(--snc-primary-dark); font-weight:700; margin-bottom:.75rem; }
.snc-notice p{ margin-bottom:.6rem; font-size:.95rem; color:#42525c; }

/* ---- 5-step booking guide banner ---- */
.snc-steps-banner{
	background: linear-gradient(135deg, var(--snc-primary-dark), var(--snc-primary));
	color:#fff;
	border-radius:16px;
	padding:1.75rem 2rem;
	text-align:center;
	margin-bottom:1.5rem;
}
.snc-steps-banner .lead{ font-size:1.15rem; font-weight:700; margin-bottom:.75rem; }
.snc-steps-banner .steps{ display:flex; flex-wrap:wrap; justify-content:center; gap:.75rem 1.5rem; font-weight:600; }
.snc-steps-banner .steps .num{
	display:inline-flex; align-items:center; justify-content:center;
	width:1.6em; height:1.6em; border-radius:50%;
	background:rgba(255,255,255,.2); margin-right:.4em; font-size:.85em;
}
.snc-steps-banner .cta{
	display:inline-block; margin-top:1rem; background:#fff; color:var(--snc-primary-dark);
	font-weight:700; padding:.65rem 1.75rem; border-radius:999px; text-decoration:none;
}
.snc-steps-banner .cta:hover{ background:var(--snc-primary-light); color:var(--snc-primary-dark); }

/* ---- LINE contact card ---- */
.snc-line-card{
	background:#fff; border:1px solid var(--snc-border); border-radius:16px;
	padding:1.5rem; text-align:center; margin-bottom:1.5rem;
}
.snc-line-card img.line-icon{ width:36px; height:36px; }
.snc-line-card img.qr{ width:120px; height:120px; margin:.75rem 0; }

/* ---- Carousel caption polish ---- */
#header-carousel .carousel-item img{ filter:brightness(0.62); }
#header-carousel .carousel-caption{ bottom: 8%; }
#header-carousel .carousel-caption h4{ text-shadow: 0 2px 10px rgba(0,0,0,.45); }
#header-carousel{ border-radius:16px; overflow:hidden; }

/* ---- Station / project cards ---- */
.project-item{ border-color: var(--snc-border) !important; border-radius:16px !important; transition: box-shadow .15s, transform .15s; }
.project-item:hover{ box-shadow:0 10px 24px rgba(15,60,80,.1); transform: translateY(-2px); }
.project-item .inner h5{ color: var(--snc-primary-dark); font-weight:700; }
.project-item a[data-lightbox]{
	position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
	width:48px; height:48px; border-radius:50%; background:rgba(15,110,140,.85);
	color:#fff !important; display:flex; align-items:center; justify-content:center;
	opacity:0; transition:opacity .2s;
}
.project-item .position-relative:hover a[data-lightbox]{ opacity:1; }
.project-item a[data-lightbox] i{ font-size:1rem; }

/* ---- Contact table ---- */
.snc-contact-table{ width:100%; border-collapse:separate; border-spacing:0 .35rem; }
.snc-contact-table td{ padding:.15rem .5rem; font-size:.95rem; }

/* ---- Footer ---- */
.snc-footer{
	background: var(--snc-primary-dark);
	color:#e8f1f4;
	padding:1.5rem 0;
	text-align:center;
	font-size:.9rem;
}
.snc-footer b{ color:#fff; }

/* ---- 404 ---- */
.snc-404-icon{ font-size:4rem; color:var(--snc-primary); }