/* Styles for resources/views/resources/views/frontend/products/show.blade.php — moved out of the view's inline <style> blocks. */

/* Global Image Styles for Full Display */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

.img-responsive {
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: center;
    border-radius: 8px;
}

.img-container {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #f8f9fa;
    border-radius: 8px;
}

/* Enhanced Image Display Rules */
.product-image,
.main-product-image,
.thumbnail-item img,
.gallery-image {
    object-fit: contain !important;
    object-position: center !important;
    background: #f8f9fa;
    border-radius: 8px;
    transition: all 0.3s ease;
}

/* Ensure all product images display properly */
.product-image,
.main-product-image,
.thumbnail-item img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center;
    background: #f8f9fa;
}

/* Custom RTL and theme enhancements for Bootstrap */
body {
    font-family: 'Cairo', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    direction: rtl;
    text-align: right;
}

.breadcrumb {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
}

/* Custom button enhancements */
.btn-warning {
    background: linear-gradient(135deg, #ffc107 0%, #ffb300 100%);
    border: none;
    color: #000 !important;
    font-weight: bold;
    border-radius: 12px;
    transition: all 0.3s ease;
}

.btn-warning:hover {
    background: linear-gradient(135deg, #ffb300 0%, #ff8f00 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(255, 193, 7, 0.4);
}

.btn-primary {
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
    border: none;
    border-radius: 12px;
    transition: all 0.3s ease;
}

.btn-primary:hover {
    background: linear-gradient(135deg, #0056b3 0%, #003d82 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 123, 255, 0.4);
}

/* Card enhancements */
.card {
    transition: all 0.3s ease;
    border-radius: 16px;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1) !important;
}

/* Gallery Image Styling */
.gallery-link {
    position: relative;
    display: block;
    transition: all 0.3s ease;
}

.gallery-link:hover {
    box-shadow: 0 0 20px rgba(0, 123, 255, 0.3);
}

.gallery-image {
    transition: transform 0.3s ease;
    cursor: zoom-in;
}

.gallery-image:hover {
    transform: scale(1.02);
}

/* Thumbnail Grid Styling */
/* The gallery thumbnails.

   This was six rules fighting each other: a duplicate .thumbnail-grid adding
   justify-items:center (which shrank every thumbnail to its content), two
   media queries changing the column count to 3 then 2, and four
   .thumbnail-item rules pinning width AND height with !important at 50, 40, 60
   and 70px per breakpoint. On a phone that produced a 40x40 !important
   thumbnail inside a 153px grid cell: under the 44px tap minimum, with 113px
   of the cell left empty.

   One rule now. auto-fill with a 64px floor lets the column count follow the
   available width instead of being declared three times, and a thumbnail can
   never be smaller than 64px at any width. No !important anywhere. */
.thumbnail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
    gap: 8px;
}

.thumbnail-item {
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 8px;
    background: #f8f9fa;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.thumbnail-item:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    z-index: 10;
}

/* Which thumbnail is currently shown in the main image. */
.thumbnail-item.is-active {
    outline: 2px solid rgb(var(--colors-primary-700));
    outline-offset: 1px;
}

.thumbnail-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.3s ease;
}

.thumbnail-item:hover img {
    object-fit: contain;
}

/* The gallery frame.

   min-height:450px with nothing capping it let the frame take its column's
   full width: measured 616x616px on a 1440 screen, a square big enough to
   dominate the page on its own. A product photo earns a large frame, not an
   unbounded one, so it is capped and centred — the column keeps its width,
   the image stops growing with it.

   The grey-blue gradient went with it. It belongs to no palette on this site
   and tinted every product photo sitting on it; a plain neutral surface shows
   the product instead of competing with it. */
#mainImageContainer {
    position: relative;
    aspect-ratio: 1;
    max-width: 360px;
    max-height: 360px;
    margin-inline: auto;
    background-color: rgb(var(--colors-neutral-100, 244 244 245));
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

#mainImageContainer:hover {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
}

#mainProductImage {
    max-height: 100%;
    object-fit: contain;
    padding: 10px;
}

/* animations */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        transform: translateY(20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Responsive Thumbnail Grid */
@media (max-width: 768px) {
#mainImageContainer {
        min-height: 300px;
    }
}

@media (max-width: 576px) {
#mainImageContainer {
        min-height: 250px;
    }
}

/* Image zoom effect */
#mainProductImage {
    transition: transform 0.3s ease;
}

#mainProductImage:hover {
    transform: scale(1.05);
}

/* تحسين الصور المصغرة - أصغر حجماً */
.thumbnail-item {
    transition: all 0.2s ease;
    border-radius: 8px;
    cursor: pointer;
    border: 2px solid transparent;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    padding: 3px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.thumbnail-item:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    border-color: #007bff;
}

/* The selected thumbnail marked #007bff — Bootstrap's blue — on a site whose
   brand is red. It takes the themed primary now, so it follows whatever colour
   is set in the admin, and the glow is derived from the same value rather than
   a second hardcoded rgba. */
.thumbnail-item.active,
.thumbnail-item.border-primary {
    border-color: rgb(var(--colors-primary-700)) !important;
    border-width: 2px !important;
    box-shadow: 0 3px 12px rgb(var(--colors-primary-700) / 0.3);
}

.thumbnail-item img {
    transition: all 0.2s ease;
    border-radius: 6px;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain;
    object-position: center;
}

/* Custom badge styles */
.badge {
    font-size: 0.8rem;
    letter-spacing: 0.5px;
}

/* Loading state styles */
.btn:disabled {
    opacity: 0.7;
    transform: none !important;
}

/* تحسينات ترتيب النص والاتجاه */
.description-rtl {
    direction: rtl;
    text-align: right;
}

.description-ltr {
    direction: ltr;
    text-align: left;
}

/* تنسيق محتوى الوصف مع HTML */
.product-description-content {
    line-height: 1.8;
    font-size: 16px;
}

.product-description-content p {
    margin-bottom: 10px;
}

/* Every line of the description starts on the same edge: headings, paragraphs,
   quotes and list items alike. Lists used to step 46px in (20px of list
   padding plus the flame's column), so the text ran down two edges. The flame
   now hangs in the card's padding, outside the text edge. */
.product-description-content ul,
.product-description-content ol {
    margin-bottom: 15px;
    padding-inline-start: 0;
}

/* The flame marker on every description list item.

   It was a fire emoji, set through CSS content — which renders from whatever
   font the device happens to ship, ignores the brand colour, and cannot be
   sized with the type around it. This is the same flame the rest of the site
   draws, local-fire-department from the project's icon set, applied as a mask
   so its colour comes from the themed primary and follows whatever is set in
   the admin.

   Logical properties throughout, so Arabic and English share one rule — the
   two .description-ltr overrides that flipped right/left by hand are gone. */
/* Nothing in the description may be split down the middle by the column
   break — a bullet or a paragraph cut in half reads as a rendering fault. */
.product-description-content p,
.product-description-content li,
.product-description-content ul,
.product-description-content ol,
.product-description-content img,
.product-description-content table {
    break-inside: avoid;
}

.product-description-content li {
    margin-bottom: 8px;
    list-style: none;
    position: relative;
    margin-inline-start: -1.6rem;
    padding-inline-start: 1.6rem;
    padding-inline-end: 0;
}

.product-description-content li::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 0.25em;
    width: 1.1em;
    height: 1.1em;
    background-color: rgb(var(--colors-primary-700));
    -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12.359%2021.42q-3.35%200-5.675-2.325T4.359%2013.42q0-2.824%201.675-5.425t4.6-4.55q.55-.375%201.137-.037.588.337.588%201.012v1.3q0%20.85.587%201.425.588.576%201.438.575.425%200%20.812-.187t.688-.538a.85.85%200%200%201%20.512-.312.72.72%200%200%201%20.588.137%207.94%207.94%200%200%201%202.475%202.875q.9%201.75.9%203.725%200%203.35-2.325%205.675t-5.675%202.325m-6-8q0%201.3.525%202.463t1.5%202.037a1%201%200%200%201-.025-.225v-.225q0-.8.3-1.5t.875-1.275l2.825-2.775%202.825%202.775q.575.575.875%201.275t.3%201.5v.225q0%20.1-.025.225a6.1%206.1%200%200%200%201.5-2.037q.525-1.162.525-2.463%200-1.25-.463-2.362A6.1%206.1%200%200%200%2016.56%209.07q-.5.326-1.05.488a4%204%200%200%201-1.125.162q-1.55%200-2.688-1.025a3.9%203.9%200%200%201-1.312-2.525q-1.95%201.65-2.988%203.513Q6.36%2011.545%206.36%2013.42m6%201.3-1.425%201.4a2%202%200%200%200-.425.625q-.15.35-.15.725%200%20.8.587%201.375.588.576%201.413.575.824%200%201.412-.575.588-.574.588-1.375%200-.4-.15-.737-.15-.338-.425-.613z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12.359%2021.42q-3.35%200-5.675-2.325T4.359%2013.42q0-2.824%201.675-5.425t4.6-4.55q.55-.375%201.137-.037.588.337.588%201.012v1.3q0%20.85.587%201.425.588.576%201.438.575.425%200%20.812-.187t.688-.538a.85.85%200%200%201%20.512-.312.72.72%200%200%201%20.588.137%207.94%207.94%200%200%201%202.475%202.875q.9%201.75.9%203.725%200%203.35-2.325%205.675t-5.675%202.325m-6-8q0%201.3.525%202.463t1.5%202.037a1%201%200%200%201-.025-.225v-.225q0-.8.3-1.5t.875-1.275l2.825-2.775%202.825%202.775q.575.575.875%201.275t.3%201.5v.225q0%20.1-.025.225a6.1%206.1%200%200%200%201.5-2.037q.525-1.162.525-2.463%200-1.25-.463-2.362A6.1%206.1%200%200%200%2016.56%209.07q-.5.326-1.05.488a4%204%200%200%201-1.125.162q-1.55%200-2.688-1.025a3.9%203.9%200%200%201-1.312-2.525q-1.95%201.65-2.988%203.513Q6.36%2011.545%206.36%2013.42m6%201.3-1.425%201.4a2%202%200%200%200-.425.625q-.15.35-.15.725%200%20.8.587%201.375.588.576%201.413.575.824%200%201.412-.575.588-.574.588-1.375%200-.4-.15-.737-.15-.338-.425-.613z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
}

.product-description-content strong {
    font-weight: 600;
    color: inherit;
}

.product-description-content em {
    font-style: italic;
}

.product-description-content u {
    text-decoration: underline;
}

/* السماح بالألوان من التحرير */
.product-description-content span {
    color: inherit;
}

.product-description-content h1,
.product-description-content h2,
.product-description-content h3,
.product-description-content h4,
.product-description-content h5,
.product-description-content h6 {
    margin: 15px 0 10px 0;
    font-weight: 600;
}

/* The editor's quote is used as a section heading here; a grey bar on the far
   side and a 15px inset pushed it off the shared edge. */
.product-description-content blockquote {
    border: 0;
    padding: 0;
    margin: 15px 0 10px;
    color: inherit;
}

.product-description-content code {
    background: #f5f5f5;
    padding: 2px 5px;
    border-radius: 3px;
    font-family: 'Courier New', monospace;
}

.product-description-content pre {
    background: #f5f5f5;
    padding: 10px;
    border-radius: 5px;
    overflow-x: auto;
    margin: 10px 0;
}

/* Responsive adjustments */
@media (max-width: 768px) {

#mainProductImage {
        height: 250px !important;
    }

    .py-3 {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }

    .card-body {
        padding: 1rem !important;
    }
}

/* Compact spacing adjustments */
.card-header {
    padding: 0.5rem 1rem;
}

/* ------------------------------------------------------------------
   Colour picker (product page). Sits on the same centre axis as the price
   above it, separated by a hairline; 8px spacing rhythm (16 above the
   label, 8 to the swatches, 24 to the buttons). Round swatches; the chosen
   one gets a brand-colour ring with a white gap. Storefront UI tokens.
   ------------------------------------------------------------------ */
.rc-colors {
    margin: 0 0 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid rgb(var(--colors-neutral-200));
}
.rc-colors-head {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .25rem;
    margin: 0 0 .5rem;
    font-size: 1rem;
    line-height: 1.5rem;
}
.rc-colors-title { font-weight: 600; color: rgb(var(--colors-neutral-900)); }
.rc-colors-required { color: rgb(var(--colors-primary-700)); font-weight: 700; }
/* The chosen colour as a quiet badge beside the label. */
.rc-colors-current {
    margin-inline-start: .5rem;
    padding: 0 .65rem;
    border-radius: 999px;
    background: rgb(var(--colors-neutral-100));
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.5rem;
    color: rgb(var(--colors-neutral-800));
}

.rc-colors-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .25rem;
}

/* 48px touch target around a 40px swatch; the ring fits inside it. */
.rc-color {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 999px;
    cursor: pointer;
}
.rc-color input {
    position: absolute; inset: 0; opacity: 0; margin: 0; cursor: inherit;
}
.rc-swatch {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 999px;
    background: var(--swatch);
    /* Hairline so white and pale swatches still read as a circle. */
    box-shadow: inset 0 0 0 1px rgb(0 0 0 / .12);
    transition: box-shadow .15s ease, transform .15s ease;
}
.rc-color:hover .rc-swatch { transform: scale(1.05); }
.rc-color input:checked + .rc-swatch {
    transform: none;
    box-shadow: inset 0 0 0 1px rgb(0 0 0 / .12), 0 0 0 3px #fff, 0 0 0 5px rgb(var(--colors-primary-700));
}
.rc-color input:focus-visible + .rc-swatch {
    outline: 2px solid rgb(var(--colors-primary-700));
    outline-offset: 6px;
}

/* Sold out: still shown (so customers know it exists), crossed and inert. */
.rc-color.is-unavailable { cursor: not-allowed; }
.rc-color.is-unavailable .rc-swatch { opacity: .45; position: relative; }
.rc-color.is-unavailable .rc-swatch::after {
    content: "";
    position: absolute;
    top: 50%;
    inset-inline: -1px;
    height: 2px;
    background: rgb(var(--colors-neutral-700));
    transform: rotate(-45deg);
}
.rc-color.is-unavailable:hover .rc-swatch { transform: none; }

@media (prefers-reduced-motion: reduce) {
    .rc-swatch { transition: none; }
}