/* AL THURAYYA ALUMINIUM — small overrides on top of the base theme.
   Swap this text logo for a real logo image as soon as one is available:
   replace the .tsdur-text-logo markup in resources/views/layouts/app.blade.php
   with an <img> tag pointing at your logo file under public/assets/images/. */

/* ---------------------------------------------------------------------
   Site-wide font: Cairo everywhere, English pages included — not just
   the Arabic ones. Cairo ships full Latin + Arabic glyph coverage, so
   one family covers both instead of swapping per locale.
   The vendor theme (style.css, ~5,000 lines) sets its own font-family
   per element throughout (Open Sans, Poppins, plain "sans-serif", ...)
   using selectors far more specific than a bare tag selector could ever
   beat (e.g. `.trading_menu > ul > li > a`) — auditing every one of
   those rules isn't practical, and simply losing to them would leave
   the nav, buttons, and headings in whatever font style.css happened
   to name. `body *` + `!important` is the deliberate, one-time
   exception to "avoid !important" in this file: it guarantees every
   element on every page renders in Cairo, full stop.
   Icon fonts are unaffected: icofont/flaticon/fontawesome set their own
   font-family directly on the icon element with `!important` too (see
   rtl.css's note on this), and when two `!important` declarations
   collide, specificity still decides the winner — an attribute
   selector like `[class^=icofont-]` outranks the plain-tag `body *`
   here, so icons keep their icon font regardless of load order. */
body,
body * {
   font-family: 'Cairo', Arial, Helvetica, sans-serif !important;
}

.tsdur-text-logo {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   font-family: 'Cairo', Arial, Helvetica, sans-serif;
   font-weight: 700;
   font-size: 15px;
   line-height: 1.15;
   letter-spacing: 0.5px;
   color: #1b1b18;
   text-transform: uppercase;
   white-space: nowrap;
}

/* style.css's own sticky-logo toggle (further down in the same file,
   loaded before this one) sets these exact two selectors to
   `display: block` for whichever logo link is currently the visible
   one, which — being three classes deep — outranks our single-class
   `.tsdur-text-logo` rule above and silently overrides it back to a
   block box. A block box puts our flex row's children in normal flow
   instead, and since `.tsdur-text-logo__lines` is itself block-level,
   it drops to a new line under the image = stacked, not side by side.
   Repeating style.css's own selectors here (same specificity, but this
   file loads after it) restores flex for the two "currently shown"
   states only; the other two ("hidden") selectors are left alone so
   the sticky-logo show/hide swap itself still works. */
.trading-main-menu .logo a.main_sticky_main_l,
.trading-main-menu .prefix .logo a.main_sticky_l {
   display: inline-flex;
}

/* The logo mark (public/assets/images/logo.png) sits beside the two-line
   brand text. Fixed height / auto width keeps it crisp at any source
   resolution; flex-shrink:0 stops it from being squeezed if the brand
   text ever runs long. */
.tsdur-logo-mark {
   height: 40px;
   width: auto;
   flex-shrink: 0;
}

/* Wrapper for the brand name + tagline, sitting beside the logo mark.
   The tagline is on its own line (display:block) below the brand name,
   the two stacked — the logo mark is the thing that sits beside this
   whole two-line block, not beside each line individually. */
.tsdur-text-logo__lines {
   display: block;
}

.tsdur-text-logo__lines span {
   display: block;
   font-size: 11px;
   font-weight: 400;
   letter-spacing: 2px;
   opacity: 0.75;
}

.tsdur-text-logo--light {
   color: #ffffff;
}

.alert {
   padding: 15px 20px;
   border-radius: 4px;
   margin-bottom: 20px;
}

.alert-success {
   background-color: #e6f6ea;
   border: 1px solid #b7e4c2;
   color: #1e7e34;
}

.text-danger {
   color: #dc3545;
   display: block;
   margin-top: 5px;
   font-size: 12px;
}

/* ---------------------------------------------------------------------
   Fix broken background-image paths inherited from the original theme.
   style.css was written assuming it sits at the site root, right next
   to the "assets" folder (that's how the original HTML template was
   laid out). In this Laravel project style.css lives one level deeper,
   in public/css/, so every url("assets/images/...") in style.css
   actually points at the non-existent public/css/assets/images/... and
   silently fails to load — the section still renders, just with no
   background image (which is why text set to white-on-purpose becomes
   invisible white-on-white). Re-declaring the same rules here with a
   corrected "../assets/images/..." path fixes them without editing the
   vendor theme file. This file is loaded after style.css, so these
   rules win. */
.breadcumb-area {
   background-image: url("../assets/images/Breckum.jpg");
}
.ab_pag_call {
   background-image: url("../assets/images/tbg.jpg");
}
.gn_coun_area {
   background-image: url("../assets/images/counter.jpg");
}
.tr_test_area {
   background-image: url("../assets/images/testi-bg.jpg");
}
.h6_vd_left {
   background-image: url("../assets/images/choose-bg.jpg");
}
.h5_vd_area {
   background-image: url("../assets/images/fun2.jpg");
}
.footer-middle {
   background-image: url("../assets/images/footerimage.jpg");
}

/* ---------------------------------------------------------------------
   Hero slider — legibility overlay (see resources/views/pages/home.blade.php,
   .em-slider-overlay)
   ---------------------------------------------------------------------
   The theme draws the caption (kicker/title/description/buttons) as
   plain white text with `.nivo-caption { background: rgba(0,0,0,0) }`
   in style.css — i.e. no darkening behind it at all — so wherever a
   slide's photo is light or busy the text has no reliable contrast and
   reads as tangled up with the image. A flat, even wash keeps that
   contrast consistent no matter what the photo shows, without needing
   z-index against Nivo's own layers (direction nav sits at z-index:9,
   its own unused auto-caption at 8): the overlay div sits after the
   slider images and before the caption layers in the HTML, so plain
   DOM order alone paints it above the photo and below the text. */
.em-nivo-slider-wrapper {
   position: relative;
}
.em-slider-overlay {
   position: absolute;
   inset: 0;
   background: rgba(0, 0, 0, 0.45);
   pointer-events: none;
}

/* ---------------------------------------------------------------------
   Guest cart: "Add to cart" is now a real <button type="submit"> inside
   a POST form (resources/views/pages/shop.blade.php,
   resources/views/pages/product-show.blade.php), not the dead
   `<a href="#">` placeholder it used to be. These rules make that
   button look identical to the theme's own circular wishlist/eye <a>
   icons (see style.css's `.product_icon a` / `.thb_product_car a`
   rules) and reset the browser's default button chrome so it doesn't
   stand out as a form control. */
.product_icon form,
.thb_product_car form {
   display: inline-block;
   margin: 0;
}
.product_icon form button,
.thb_product_car form button {
   width: 38px;
   height: 38px;
   border-radius: 50%;
   margin: 0 3px;
   display: inline-block;
   text-align: center;
   line-height: 38px;
   box-shadow: 0 0 10px 0 rgb(27 81 209 / 10%);
   color: #212121;
   background: #fff;
   border: none;
   padding: 0;
   cursor: pointer;
   transition-duration: .5s;
   font: inherit;
}
.product_icon form button:hover,
.thb_product_car form button:hover {
   color: #fff;
   background: #03a9f4;
}

/* ---------------------------------------------------------------------
   Header cart icon — replaces the old "GET IN TOUCH" (تواصل معنا)
   button in the main desktop nav (resources/views/layouts/app.blade.php,
   .donate-btn-header) and sits next to the hamburger toggle on mobile
   (.mobile_menu_option), instead of the small always-visible top bar
   it used to live in.
   `inset-inline-end` (not `right`) on the badge so it sits on the
   outer corner of the icon in both directions: the true right in
   English, the true left in Arabic — no separate rtl.css override
   needed. A white ring around the badge keeps it legible against
   either the blue button or the mobile header's own background. */
.tsdur-header-cart__badge {
   position: absolute;
   top: -8px;
   inset-inline-end: -10px;
   min-width: 16px;
   height: 16px;
   line-height: 16px;
   padding: 0 4px;
   border-radius: 999px;
   background: #ff5252;
   color: #fff;
   font-size: 10px;
   font-weight: 700;
   text-align: center;
   box-shadow: 0 0 0 2px #fff;
}

/* Desktop: the cart button reuses .dtbtn's own blue-pill chrome (same
   size, radius, hover-to-black transition as the old contact button it
   replaced) — only display/alignment is adjusted here, for an icon
   instead of a text label. position:relative anchors the badge above. */
.tsdur-cart-btn {
   position: relative;
   display: inline-flex !important;
   align-items: center;
   justify-content: center;
   width: 46px;
   padding: 10px !important;
   font-size: 18px;
}

/* Mobile: sits beside the hamburger toggle inside .mobile_menu_option. */
.mobile_menu_option {
   display: flex;
   align-items: center;
   gap: 18px;
}
.tsdur-mobile-cart {
   position: relative;
   display: inline-flex;
   color: #212121;
   font-size: 24px;
   line-height: 1;
}

/* ---------------------------------------------------------------------
   Shared "card" surface for the cart / checkout / order-success pages —
   same white background, radius and soft shadow the theme already uses
   for its own panels (see .apartment_area in style.css), so these new
   pages read as part of the same design language instead of a bolted-on
   admin-style block.
   --------------------------------------------------------------------- */
.tsdur-card {
   background: #fff;
   border-radius: 10px;
   box-shadow: 0px 0px 34px 0px rgba(0, 0, 0, 0.07);
   padding: 30px;
}
.tsdur-currency {
   font-size: 0.8em;
   font-weight: 500;
   opacity: 0.75;
}

/* ---------------------------------------------------------------------
   Cart page (resources/views/pages/cart.blade.php)
   --------------------------------------------------------------------- */
.tsdur-cart-empty {
   text-align: center;
   padding: 70px 20px;
}
.tsdur-cart-empty i {
   font-size: 56px;
   color: #03a9f4;
   opacity: 0.35;
   display: block;
   margin-bottom: 20px;
}
.tsdur-cart-empty p {
   font-size: 18px;
   color: #555;
   margin-bottom: 24px;
}
.tsdur-cart-card {
   padding: 0;
   margin-bottom: 20px;
   overflow: hidden;
}
.tsdur-cart-table {
   width: 100%;
   border-collapse: collapse;
}
.tsdur-cart-table thead th {
   background: #f8f9fa;
   font-size: 12px;
   text-transform: uppercase;
   letter-spacing: 0.5px;
   color: #888;
   font-weight: 700;
}
.tsdur-cart-table th,
.tsdur-cart-table td {
   padding: 18px 20px;
   border-bottom: 1px solid #f0f0f0;
   text-align: start;
   vertical-align: middle;
}
.tsdur-cart-table tbody tr:last-child td {
   border-bottom: none;
}
.tsdur-cart-product {
   display: flex;
   align-items: center;
   gap: 14px;
}
.tsdur-cart-product img {
   width: 64px;
   height: 64px;
   object-fit: cover;
   border-radius: 8px;
   flex-shrink: 0;
   border: 1px solid #f0f0f0;
}
.tsdur-cart-product a {
   font-weight: 600;
   color: #1b1b18;
}
.tsdur-cart-product a:hover {
   color: #03a9f4;
}

/* Quantity stepper: bordered pill with -/+ buttons either side of the
   number field. JS (see cart.blade.php's @push('scripts')) makes the
   buttons adjust the field and resubmit; without JS the field's own
   native spinners plus its onchange="this.form.submit()" still work,
   so the control degrades gracefully rather than breaking. */
.tsdur-qty-stepper {
   display: inline-flex;
   align-items: stretch;
   border: 1px solid #e5e5e5;
   border-radius: 6px;
   overflow: hidden;
   width: fit-content;
}
.tsdur-qty-stepper__btn {
   width: 32px;
   border: none;
   background: #f8f9fa;
   color: #555;
   font-size: 16px;
   line-height: 1;
   cursor: pointer;
   transition: 0.2s;
}
.tsdur-qty-stepper__btn:hover {
   background: #03a9f4;
   color: #fff;
}
.tsdur-qty-stepper__input {
   width: 44px;
   border: none;
   border-inline: 1px solid #e5e5e5;
   text-align: center;
   font-size: 14px;
   -moz-appearance: textfield;
}
.tsdur-qty-stepper__input::-webkit-outer-spin-button,
.tsdur-qty-stepper__input::-webkit-inner-spin-button {
   -webkit-appearance: none;
   margin: 0;
}

.tsdur-cart-remove {
   width: 34px;
   height: 34px;
   border-radius: 50%;
   border: none;
   background: #fdeceb;
   color: #e5484d;
   font-size: 14px;
   line-height: 1;
   cursor: pointer;
   transition: 0.2s;
}
.tsdur-cart-remove:hover {
   background: #e5484d;
   color: #fff;
}
.tsdur-cart-continue {
   display: inline-flex;
   align-items: center;
   gap: 8px;
}

/* ---------------------------------------------------------------------
   Order-summary card — shared by the cart page (subtotal only) and the
   checkout page (full line-item list + subtotal).
   --------------------------------------------------------------------- */
.tsdur-summary-card h3 {
   margin-bottom: 20px;
   font-size: 19px;
   display: flex;
   align-items: center;
   gap: 8px;
}
.tsdur-summary-card h3 i {
   color: #03a9f4;
}
.tsdur-summary-card--sticky {
   position: sticky;
   top: 20px;
}
.tsdur-summary-card__list {
   list-style: none;
   padding: 0;
   margin: 0 0 18px;
}
.tsdur-summary-card__list li {
   display: flex;
   align-items: center;
   gap: 12px;
   padding: 12px 0;
   border-bottom: 1px solid #f0f0f0;
}
.tsdur-summary-card__list li img {
   width: 44px;
   height: 44px;
   object-fit: cover;
   border-radius: 6px;
   flex-shrink: 0;
   border: 1px solid #f0f0f0;
}
.tsdur-summary-card__item-info {
   flex: 1;
   display: flex;
   flex-direction: column;
   gap: 2px;
   min-width: 0;
}
.tsdur-summary-card__item-name {
   font-size: 14px;
   font-weight: 600;
   color: #1b1b18;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}
.tsdur-summary-card__item-qty {
   font-size: 12px;
   color: #888;
}
.tsdur-summary-card__row {
   display: flex;
   justify-content: space-between;
   align-items: center;
}
.tsdur-summary-card__row--total {
   font-size: 18px;
   padding-top: 6px;
   margin-bottom: 22px;
}
.tsdur-summary-card__row--total strong {
   color: #03a9f4;
}
.tsdur-summary-card__cta {
   display: block;
   width: 100%;
   text-align: center;
   margin: 0;
}

/* ---------------------------------------------------------------------
   Checkout page (resources/views/pages/checkout.blade.php)
   --------------------------------------------------------------------- */
.tsdur-checkout-subtitle {
   max-width: 760px;
   margin: 0 0 30px;
   padding: 14px 18px;
   background: #eaf7fe;
   border-inline-start: 3px solid #03a9f4;
   border-radius: 4px;
   color: #23577a;
   font-size: 14px;
   display: flex;
   align-items: center;
   gap: 10px;
}
.tsdur-checkout-subtitle i {
   font-size: 18px;
   flex-shrink: 0;
}
.tsdur-checkout-form {
   margin-bottom: 24px;
}
.tsdur-checkout-form h3 {
   margin-bottom: 20px;
   font-size: 19px;
   display: flex;
   align-items: center;
   gap: 8px;
}
.tsdur-checkout-form h3 i {
   color: #03a9f4;
}
.tsdur-checkout-form .witr_apartment_form .btn {
   width: 100%;
   text-align: center;
}

/* ---------------------------------------------------------------------
   Order-success page (resources/views/pages/checkout-success.blade.php)
   --------------------------------------------------------------------- */
.tsdur-order-success {
   text-align: center;
   padding: 60px 40px;
   max-width: 560px;
   margin: 0 auto;
}
.tsdur-order-success__icon {
   width: 74px;
   height: 74px;
   line-height: 74px;
   margin: 0 auto 20px;
   border-radius: 50%;
   background: #e6f6ea;
   color: #1e9c5c;
   font-size: 34px;
}
.tsdur-order-success h2 {
   margin-bottom: 12px;
}
.tsdur-order-success__table {
   margin: 26px auto;
   max-width: 380px;
}
.tsdur-order-success__actions {
   display: flex;
   justify-content: center;
   gap: 14px;
   flex-wrap: wrap;
   margin-top: 10px;
}

/* ---------------------------------------------------------------------
   Product-detail "Add to cart" form
   (resources/views/pages/product-show.blade.php)
   --------------------------------------------------------------------- */
.tsdur-product-add-form {
   display: flex;
   align-items: center;
   gap: 12px;
   margin: 20px 0;
}
.tsdur-product-add-form__label {
   margin: 0;
   font-weight: 600;
}
.tsdur-product-add-form input[type="number"] {
   width: 70px;
   padding: 8px;
   border: 1px solid #ddd;
   border-radius: 4px;
}

/* ---------------------------------------------------------------------
   Public-facing secondary button / plain summary table — these pages
   extend layouts.app (the public site), which never loads admin.css
   (that file is only pulled in by layouts.admin, i.e. the /admin
   dashboard), so the admin-btn / admin-table classes these pages
   originally borrowed rendered with NO matching CSS at all here. These
   two classes are the fix, styled to sit consistently next to the
   theme's own .witr_btn (same padding scale, uppercase, sharp corners). */
.tsdur-btn-muted {
   display: inline-block;
   padding: 10px 35px;
   background: transparent;
   color: #212121;
   border: 1px solid #ddd;
   border-radius: 0;
   font-size: 16px;
   font-weight: 500;
   text-align: center;
   text-transform: uppercase;
   transition: .3s;
}
.tsdur-btn-muted:hover {
   background: #f1f1f1;
   color: #212121;
}
.tsdur-summary-table {
   width: 100%;
   border-collapse: collapse;
}
.tsdur-summary-table th,
.tsdur-summary-table td {
   padding: 12px 16px;
   border-bottom: 1px solid #eee;
   text-align: start;
}
.tsdur-summary-table th {
   font-weight: 700;
   color: #1b1b18;
   width: 45%;
}

@media (max-width: 991px) {
   .tsdur-summary-card--sticky {
      position: static;
   }
}

@media (max-width: 767px) {
   .tsdur-cart-table thead {
      display: none;
   }
   .tsdur-cart-table tr {
      display: flex;
      flex-wrap: wrap;
      padding: 16px 20px;
      gap: 10px 16px;
   }
   .tsdur-cart-table td {
      border-bottom: none;
      padding: 0;
      flex: 1 1 auto;
   }
   .tsdur-cart-table td:first-child {
      flex: 1 1 100%;
   }
   .tsdur-cart-table tr {
      border-bottom: 1px solid #f0f0f0;
   }
}