/* --- 3DHOP CONFLICT PATCH v5 --- */
/* Overrides global styles from video_portfolio.css & Bootstrap
   that affect 3DHOP layout and GLightbox sizing */

/* 1. FORCE Body/HTML Reset for 3DHOP Layout */
html,
body {
    padding: 0 !important;
    margin: 0 !important;
    height: 100% !important; /* Ensure full height */
    width: 100% !important;  /* Ensure full width */
    overflow: hidden !important; /* Prevent scrollbars interfering */
    font-family: 'Roboto', sans-serif !important; /* Optional: Force base font */
    font-size: 16px !important; /* Reset base font size */
    line-height: normal !important; /* Reset line height */
    color: initial !important; /* Reset default text color */
    background-color: #000 !important; /* Ensure black background */
    box-sizing: border-box !important;
}
*, *:before, *:after {
    box-sizing: inherit !important;
}


/* 2. Re-assert Header Styles */
.header {
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  top: 1rem !important;
  width: 90% !important;
  max-width: 1200px !important;
  text-align: center !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 10 !important;
}
.header h1 {
  color: var(--clr-dorado) !important;
  font-family: var(--ff-title) !important;
  font-size: clamp(1.8rem, 2vw, 3.5rem) !important;
  margin: 0 !important;
  padding-bottom: 0.2rem !important;
}


/* 3. Re-assert Arrow Styles */
.arrow-container {
    position: fixed !important;
    top: 80% !important;
    transform: translateY(-50%) !important;
    cursor: pointer !important;
    z-index: 20 !important;
    display: block !important;
    opacity: 1 !important;
}

@media (min-width: 992px){
    .arrow-container {
        top: 50% !important;
        transform: translateY(-50%) !important;
    }
}

.left { left: 20px !important; }
.right { right: 20px !important; }
.arrow {
    width: 0 !important;
    height: 0 !important;
    border-top: 20px solid transparent !important;
    border-bottom: 20px solid transparent !important;
    cursor: pointer !important;
}
.left .arrow { border-right: 20px solid white !important; }
.right .arrow { border-left: 20px solid white !important; }


/* 4. Re-assert Footer Styles (.datosPieza & .animacion) */
.datosPieza {
  
  position: absolute !important;
  bottom: 4vh !important;
  height: 6vh !important;
  overflow-y: auto !important;
  width: 90vw !important;
  max-width: 1200px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  display: grid !important;
  justify-items: center !important;
  align-items: center !important;
  padding: 0.2rem 0 !important;
  z-index: 10 !important;
  color: white !important;
}

.datosPieza p.datos {
        font-size: 0.85rem !important;
        margin: 0 !important;
    }

.animacion {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 4vh !important;
    background-color: var(--clr-azul) !important;
    z-index: 10 !important;
}
.animacion a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 100% !important;
  width: 100% !important;
  font-size: clamp(1.5rem, 1.3rem + 0.7vw, 2.0rem) !important;
  color: var(--clr-dorado) !important;
  text-decoration: none !important;
}
.datosPieza p.datos {
    margin: 0 !important;
    color: white !important;
}
/* Desktop overrides for footer */
@media (min-width: 992px) {
    .datosPieza {
        height: auto !important;
        align-items: flex-start !important;
        padding-top: 0.5rem !important;
        overflow-y: hidden !important;
        /* Re-assert grid template for desktop */
         grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
         column-gap: 2rem !important;
         row-gap: 0 !important;
    }
    .datosPieza p.datos {
        font-size: 1rem !important;
    }
}




/* --- PATCH FOR ARROWS & FIELDSET --- */

/* 1. FORCE Arrow Visibility */
.arrow-container {
    z-index: 100 !important;   /* High z-index */
    display: block !important; /* Ensure it's displayed */
    visibility: visible !important; /* Ensure it's visible */
    opacity: 1 !important;     /* Ensure it's not transparent */
    /* Minimal resets to avoid breaking too much */
    width: auto !important;
    height: auto !important;
}

/* Also ensure the link and arrow shape inside are visible */
.arrow-container a,
.arrow-container .arrow {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* 2. Center Fieldset within Cajetin */
.cajetin {
  /* Re-assert positioning and text-align */
  position: absolute !important;
  bottom: 5vh !important; /* Adjusted slightly higher */
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: auto !important; /* Allow shrink-wrap */
  max-width: 90vw !important;
  text-align: center !important; /* Crucial for centering inline-block */
  z-index: 10 !important;
}

/* Ensure fieldset is centered and has adequate padding */
/* Ensure fieldset is centered and has adequate padding */
.cajetin fieldset {
  display: inline-block !important; /* Allows centering via parent's text-align */
  margin: 0 !important;             /* Reset any conflicting margins */
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
  
  width: auto !important;           /* Allow fieldset to size to its content */
  max-width: 100% !important;
  background: none !important;
  text-align: left !important;      /* Align content inside fieldset to the left */
}

.cajetin legend {
  /* Minimal resets for legend centering */
  display: block !important;
  width: auto !important;
  margin: 0 auto 0.5em auto !important; /* Center horizontally, add bottom margin */
  padding: 0 0.5em !important;
  float: none !important;
  text-align: center !important;
  color: white !important; /* Ensure color */
  font-size: 1em !important; /* Ensure size */
}

/* Style the NEW <div> wrappers */
.cajetin fieldset div {
    display: block;        /* Each div takes its own line */
    margin-bottom: 0.5rem; /* Space BETWEEN lines */
    white-space: nowrap;   /* Keep input and text together on one line */
}
/* Remove space after the last line */
.cajetin fieldset div:last-child {
    margin-bottom: 0;
}

/* Style the radio button itself */
.cajetin fieldset input[type="radio"] {
    display: inline-block;    /* Keep on same line as text */
    vertical-align: middle; /* Align nicely with text */
    margin: 0 0.5rem 0 0 !important; /* Override inline style, add space to the RIGHT */
    cursor: pointer;
}

/* --- 6. FORCE GLightbox Portrait Styles (Mobile focus - v8 Refined) --- */

/* Ensure parent containers are behaving */
body .glightbox-container.portrait-mode {
    padding: 0 !important;
    overflow: hidden !important; /* Prevent scrollbars on the main container */
}
body .glightbox-container.portrait-mode .ginner-container {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
body .glightbox-container.portrait-mode .gslide {
    width: auto !important;   /* Let height dictate width based on aspect ratio */
    height: 90% !important;   /* Use 90% of viewport height */
    max-width: 100vw !important; /* Ensure it doesn't exceed viewport width */
    max-height: 90vh !important; /* Explicit max-height */
    margin: auto !important;
    flex: none !important;    /* Override flex properties */
    display: flex !important; /* Use flex to center the plyr wrapper */
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important; /* Prevent content spilling out */
}
body .glightbox-container.portrait-mode .gslide-media,
body .glightbox-container.portrait-mode .gslide-video {
    width: 100% !important; /* Allow wrapper to fill gslide width if needed */
    height: 100% !important;
    max-width: none !important;
    display: flex !important; /* Use flex to center the plyr wrapper */
    align-items: center !important;
    justify-content: center !important;
}

/* --- CRITICAL: Target the Plyr Wrapper --- */
body .glightbox-container.portrait-mode .plyr__video-wrapper {
    padding: 0 !important; /* REMOVE padding-bottom ratio enforcement */
    margin: 0 !important; /* Reset margin */
    /* Force size based on PARENT (.gslide / .gslide-video) */
    width: auto !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    /* Reset potentially conflicting position/display */
    position: relative !important;
    display: block !important;
    /* Ensure aspect ratio is handled by video inside */
    aspect-ratio: unset !important;
    /* background-color: rgba(0, 255, 0, 0.5) !important; */ /* Debug color */
}

/* --- Target the VIDEO element itself --- */
body .glightbox-container.portrait-mode .plyr__video-wrapper video {
    position: relative !important; /* Changed from absolute/fixed */
    display: block !important;
    /* Force size based on PARENT (.plyr__video-wrapper) */
    width: auto !important;   /* Let height and object-fit determine width */
    height: 100% !important;  /* Fill the wrapper's height */
    max-width: 100% !important;
    max-height: 100% !important;
    /* Fit video within dimensions, maintaining aspect ratio */
    object-fit: contain !important;
    /* Reset potentially conflicting transforms */
    transform: none !important;
    /* background-color: rgba(255, 0, 0, 0.5) !important; */ /* Debug color */
}

/* Ensure controls don't interfere */
body .glightbox-container.portrait-mode .plyr__controls {
   width: 100% !important;
   position: absolute !important; /* Keep controls overlaid */
   bottom: 0 !important;
   left: 0 !important;
   z-index: 10 !important; /* Make sure controls are on top */
}