/* ==========================================================================
   CALIFORNIA BEACH FEET - MASTER STYLESHEET (CSS GRID ARCHITECTURE)
   Consolidated Global Layout, Standalone Pages, and Legacy Gallery Overrides
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. GLOBAL RESETS & FOUNDATION
   -------------------------------------------------------------------------- */
* { box-sizing: border-box; }

html, body {
    overflow-x: hidden; 
    width: 100%; 
    margin: 0; 
    padding: 0;
    background: #000; 
    color: #fff; 
    font-family: Helvetica, Verdana, Arial, sans-serif;
    text-align: center;
}

img, table, iframe {
    max-width: 100% !important;
    height: auto !important;
}

/* GLOBAL LINK BEHAVIOR */
a, a:link, a:visited { 
    color: #fff !important; 
    font-weight: normal !important; 
    text-decoration: none !important; 
    transition: color 0.2s ease;
}
a:hover, a:active { 
    color: #ff0000 !important; 
    text-decoration: none !important; 
}

/* METADATA EXACT MATCH */
.meta, .meta a, .catalog-entry .row a, .video-catalog-entry .row a, .catalog-entry .desc {
    color: #e0e0e0 !important;
    font-weight: normal !important;
    font-size: 16px;
    text-align: center !important;
}
.date { 
    color: #e0e0e0 !important;
    font-weight: normal !important;
    font-size: 16px;
    text-align: left; /* Keep left alignment for Secure Galleries & Posts */
    margin-bottom: 10px; 
}

/* Guarantee Meta Links turn red on hover */
.meta a:hover, .catalog-entry .row a:hover, .video-catalog-entry .row a:hover {
    color: #ff0000 !important;
}

#page-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 15px;
    width: 100%;
}

hr, hr.photo-divider, hr.video-divider, .headline, .catalog-entry .desc, .video-catalog-entry .desc { 
    display: none !important; 
}


/* --------------------------------------------------------------------------
   2. GLOBAL HEADER & NAV
   -------------------------------------------------------------------------- */
/* FLATTENED FOR MOBILE COMPATIBILITY */
#header-wrapper { width: 100%; display: flex; justify-content: center; overflow: hidden; margin-bottom: 20px; }
#header-wrapper table, #header-wrapper img { width: 100% !important; max-width: 1127px !important; height: auto !important; }

#nav-wrapper, center table { margin: 30px auto; width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; overflow: hidden; }
#nav-wrapper table, center table table { width: 100% !important; max-width: 800px !important; }

#nav-wrapper ul, center table ul { 
    display: flex; justify-content: center; flex-wrap: wrap; gap: 15px; 
    list-style: none; padding: 0 !important; margin: 0 !important; width: 100%; 
}
/* Overrides legacy 'nowrap' to allow link wrapping on phones */
#nav-wrapper ul li, center table ul li { white-space: normal !important; word-wrap: break-word; }
#nav-wrapper ul li a, center table ul li a, center table a { font-size: 18px !important; font-weight: bold !important; padding: 8px 12px !important; display: inline-block; }


/* --------------------------------------------------------------------------
   3. STANDALONE CUSTOM PAGES
   -------------------------------------------------------------------------- */
.hero-image, .secure-badge { display: block; margin: 0 auto 20px auto; width: 100%; max-width: 800px; border-radius: 8px; border: 1px solid #333; box-shadow: 0 8px 25px rgba(0,0,0,0.6); }
.hero-image:hover { transform: scale(1.02); box-shadow: 0 12px 35px rgba(0,0,0,0.9); }

.stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; max-width: 700px; margin: 0 auto 50px auto; }
.stat-box { background: #000; border: 1px solid #222; padding: 20px; border-radius: 6px; font-size: 1.3rem; color: #d0d0d0; }
.stat-box strong { display: block; color: #fff; font-size: 1.7rem; margin-bottom: 5px; }

.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 800px; margin: 0 auto 40px auto; }
a.tier { display: block; background: #000; border: 1px solid #333; border-radius: 8px; padding: 30px 15px; transition: transform 0.2s ease, border-color 0.2s; }
a.tier:hover { transform: translateY(-5px); border-color: #666; box-shadow: 0 8px 20px rgba(0,0,0,0.6); }
a.tier.highlight { border-color: #d4af37; background: #0a0a0a; }
.tier-title { color: #888; font-size: 1.1rem; text-transform: uppercase; margin-bottom: 15px; font-weight: bold !important; }
.tier-price { font-size: 2.5rem; font-weight: bold; color: #fff; margin-bottom: 10px; }

.action-container { display: flex; flex-direction: column; align-items: center; gap: 20px; margin: 40px auto; max-width: 800px; background: #000; padding: 30px; border-radius: 8px; border: 1px solid #222; }
.payment-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; width: 100%; }
.payment-row a img { width: 100% !important; max-width: 350px; transition: transform 0.2s; }
.payment-row a:hover img { transform: scale(1.03); }

#about-text { color: #e0e0e0; text-align: left; font-size: 1.8rem; line-height: 1.7; margin: 40px auto 20px auto; max-width: 800px; }
.about-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin: 55px auto; max-width: 800px; }
.about-grid img { width: 100%; border-radius: 4px; border: 1px solid #444; transition: transform 0.2s; }
.about-grid img:hover { transform: scale(1.05); border-color: #777; z-index: 10; position: relative; }

.testimonial-card, .testimonial { background: #000; padding: 25px; margin: 0 auto 25px auto; max-width: 700px; border-radius: 8px; border: 1px solid #333; text-align: left; border-left: 4px solid #444; }
.quote { font-size: 1.5rem; font-style: italic; line-height: 1.6; color: #ccc; margin-bottom: 15px; display: block; }
.author { font-weight: bold; color: #d4af37; text-align: right; display: block; text-transform: uppercase; }

.links-container { display: flex; flex-wrap: wrap; justify-content: center; gap: 25px; margin: 40px auto; max-width: 1000px; }
.link-card { display: flex; align-items: center; justify-content: center; width: 260px; height: 130px; padding: 20px; border-radius: 8px; transition: transform 0.2s; }
.card-dark { background: #000; border: 1px solid #333; }
.card-light { background: #fff; border: 1px solid #ddd; }
.link-card:hover { transform: scale(1.05); box-shadow: 0 6px 15px rgba(0,0,0,0.8); }
.link-card img { max-width: 100%; max-height: 100%; object-fit: contain; }

.video-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; margin-bottom: 40px; }
.video-grid a { display: block; flex-basis: calc(20% - 20px); min-width: 150px; }
.video-grid img { width: 100%; border: 2px solid #333; border-radius: 6px; transition: transform 0.2s; }
.video-grid a:hover img { transform: scale(1.05); border-color: #ff0000; }

/* Secure Login / Dashboard Tweaks (Viewport Blowout Fixes) */
.welcome-banner { margin-bottom: 25px; width: 100% !important; }
.welcome-banner img { border-radius: 6px; max-width: 100% !important; height: auto !important; }

.header-include { margin-bottom: 40px; width: 100% !important; max-width: 100% !important; display: flex; justify-content: center; overflow: hidden; }
/* Crushes injected header images so they cannot exceed screen size */
.header-include * { max-width: 100% !important; height: auto !important; } 

.dashboard-grid { display: flex; flex-direction: column; gap: 40px; align-items: center; width: 100%; }
.dashboard-card { background: #000; border: 1px solid #333; border-radius: 8px; padding: 30px 20px; width: 100%; max-width: 800px; box-shadow: 0 4px 12px rgba(0,0,0,0.6); }
.dashboard-card > a > img { border-radius: 4px; transition: transform 0.2s ease, box-shadow 0.2s ease; max-width: 100%; }
.dashboard-card > a:hover > img { transform: scale(1.02); box-shadow: 0 6px 15px rgba(0,0,0,0.8); }

/* Crushes injected legacy navigations and forces wrap */
.nav-include { margin-top: 25px; display: flex; flex-wrap: wrap; justify-content: center; width: 100% !important; overflow: hidden; }
.nav-include * { max-width: 100% !important; white-space: normal !important; }
.nav-include ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; padding: 0; list-style: none; margin: 0; }
.nav-include a { margin: 5px !important; display: inline-block; }


/* --------------------------------------------------------------------------
   4. CATALOG ARCHITECTURE (Dynamic CSS Grid)
   -------------------------------------------------------------------------- */

.catalog-entry, .video-catalog-entry, .post, #gallery, ul#gallery {
    background: #000; padding: 20px; border-radius: 8px; border: 1px solid #333; 
    box-shadow: 0 4px 10px rgba(0,0,0,0.5); text-align: center; margin: 0 auto 30px auto; color: #fff; width: 100%; max-width: 1150px;
}

/* Image Base Borders */
.catalog-entry img, .video-catalog-entry img, .post img, #gallery img, ul#gallery img {
    border: 1px solid #444; border-radius: 4px; transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}

/* Hover: ALL images enlarge slightly */
.catalog-entry img:hover, .video-catalog-entry img:hover, .post img:hover, #gallery img:hover, ul#gallery img:hover { 
    transform: scale(1.05); box-shadow: 0 6px 15px rgba(0,0,0,0.8); z-index: 10; position: relative; 
}

/* Hover: ONLY enlargeable links get the Red Box */
.catalog-entry a > img:hover, .video-catalog-entry a > img:hover, .post a > img:hover, #gallery a > img:hover, ul#gallery a > img:hover {
    border-color: #ff0000;
}

/* Flex Column Wrappers */
.photo-catalog, .photo-catalog-min, ul.video-catalog-list {
    display: flex; flex-direction: column; align-items: center; gap: 30px; margin: 25px 0; padding: 0; list-style: none; width: 100%;
}
.photo-catalog-min .catalog-entry { max-width: 750px; }
.video-catalog-entry { max-width: 720px; }

/* THE MAGIC CSS GRID: Automatically adapts rows & prevents distortion */
ul.photo-row, .thumbnail-group, ul.video-row {
    display: grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: 1fr !important;
    gap: 15px; list-style: none; padding: 0; margin: 0 0 15px 0; width: 100%; align-items: center;
}
ul.photo-row li, .thumbnail-group li, ul.video-row li {
    display: flex; justify-content: center; align-items: center; width: 100% !important; margin: 0 !important;
}
ul.photo-row img, .thumbnail-group img, ul.video-row img {
    width: auto !important; max-width: 100% !important; height: auto !important; max-height: 260px; object-fit: contain;
}

/* ==========================================================================
   METADATA GRID SYNC (Aligns text perfectly under thumbnails)
   ========================================================================== */

/* Main Grid Container for Metadata */
.catalog-entry .row, .catalog-entry .meta, .video-catalog-entry .row, .video-catalog-entry .meta {
    display: grid !important; gap: 15px; align-items: center; padding-top: 10px; margin: 0 !important; width: 100%;
}

/* Force dead-center alignment inside each column */
.catalog-entry .row div, .catalog-entry .meta div, .video-catalog-entry .row div, .video-catalog-entry .meta div {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    padding: 0 !important;
    width: 100%;
}

/* Defeat the left-aligned .date class when inside a grid column */
.catalog-entry .row .date, .catalog-entry .meta .date, .video-catalog-entry .row .date, .video-catalog-entry .meta .date {
    text-align: center !important;
    margin: 0 !important;
    justify-content: center !important;
    width: 100%;
}

/* INTELLIGENT AUTO-DETECTION: 5-Column Metadata (For ANY 5-Image Galleries) */
.catalog-entry:has(ul.photo-row li:nth-child(4)) .row, 
.catalog-entry:has(ul.photo-row li:nth-child(4)) .meta {
    grid-template-columns: repeat(5, 1fr) !important;
}
.catalog-entry:has(ul.photo-row li:nth-child(4)) .row div:nth-child(1), .catalog-entry:has(ul.photo-row li:nth-child(4)) .meta div:nth-child(1) { grid-column: 1; }
.catalog-entry:has(ul.photo-row li:nth-child(4)) .row div:nth-child(2), .catalog-entry:has(ul.photo-row li:nth-child(4)) .meta div:nth-child(2) { grid-column: 3; }
.catalog-entry:has(ul.photo-row li:nth-child(4)) .row div:nth-child(3), .catalog-entry:has(ul.photo-row li:nth-child(4)) .meta div:nth-child(3) { grid-column: 5; }

/* INTELLIGENT AUTO-DETECTION: 3-Column Metadata (For 3-Image Galleries & ALL Videos) */
.catalog-entry:not(:has(ul.photo-row li:nth-child(4))) .row, 
.catalog-entry:not(:has(ul.photo-row li:nth-child(4))) .meta,
.video-catalog-entry .row, .video-catalog-entry .meta {
    grid-template-columns: repeat(3, 1fr) !important;
}
.catalog-entry:not(:has(ul.photo-row li:nth-child(4))) .row div:nth-child(1), .catalog-entry:not(:has(ul.photo-row li:nth-child(4))) .meta div:nth-child(1),
.video-catalog-entry .row div:nth-child(1), .video-catalog-entry .meta div:nth-child(1) { grid-column: 1; }
.catalog-entry:not(:has(ul.photo-row li:nth-child(4))) .row div:nth-child(2), .catalog-entry:not(:has(ul.photo-row li:nth-child(4))) .meta div:nth-child(2),
.video-catalog-entry .row div:nth-child(2), .video-catalog-entry .meta div:nth-child(2) { grid-column: 2; }
.catalog-entry:not(:has(ul.photo-row li:nth-child(4))) .row div:nth-child(3), .catalog-entry:not(:has(ul.photo-row li:nth-child(4))) .meta div:nth-child(3),
.video-catalog-entry .row div:nth-child(3), .video-catalog-entry .meta div:nth-child(3) { grid-column: 3; }


/* --------------------------------------------------------------------------
   5. 2006-2011 VIDEO FIXES (3-Across Grid + Vertical Metadata)
   -------------------------------------------------------------------------- */
ul.video-catalog-list:not(:has(.thumbnail-group)) {
    display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 25px; max-width: 1000px;
}
ul.video-catalog-list:not(:has(.thumbnail-group)) > li { width: 100%; }
ul.video-catalog-list:not(:has(.thumbnail-group)) .video-catalog-entry { margin: 0; max-width: 100%; }

/* Un-squashes the Date from the Video Link by stacking them vertically */
ul.video-catalog-list:not(:has(.thumbnail-group)) .row,
ul.video-catalog-list:not(:has(.thumbnail-group)) .meta {
    display: flex !important; flex-direction: column !important; gap: 8px; margin-top: 15px !important;
}


/* --------------------------------------------------------------------------
   6. MOBILE & TABLET MEDIA QUERIES (Global)
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
    /* FLEXBOX OVERRIDE: Creates the perfectly centered 3:2 Pyramid for 5-across photos */
    ul.photo-row { 
        display: flex !important; 
        flex-wrap: wrap !important; 
        justify-content: center !important; 
    }
    ul.photo-row li { 
        flex: 0 1 calc(33.333% - 15px) !important; 
        max-width: calc(33.333% - 15px) !important; 
    }
    
    ul.video-catalog-list:not(:has(.thumbnail-group)) { grid-template-columns: repeat(2, 1fr) !important; }
    
    .pricing-grid { grid-template-columns: repeat(2, 1fr); }
    a.tier:nth-child(3) { grid-column: span 2; }
    .about-grid { grid-template-columns: repeat(4, 1fr); }
    .about-grid img:nth-child(n+9) { display: none !important; }
}

@media (max-width: 640px) {
    /* Forces ALL Image Grids back to a single vertical column on portrait phones */
    ul.photo-row, .thumbnail-group, ul.video-row, ul.video-catalog-list:not(:has(.thumbnail-group)) {
        display: grid !important; grid-auto-flow: row !important; grid-template-columns: 1fr !important; gap: 20px !important;
    }
    
    ul.photo-row li { max-width: 100% !important; }
    
    /* Intrinsic Mobile Sizing */
    ul.photo-row img, .thumbnail-group img, ul.video-row img { 
        max-height: none !important; 
        width: auto !important; 
        max-width: 100% !important; 
    }
    
    /* METADATA OVERRIDE: Swaps stubborn Grid to bulletproof Flexbox for text centering */
    .catalog-entry .row, .catalog-entry .meta, .video-catalog-entry .row, .video-catalog-entry .meta,
    .photo-catalog .catalog-entry .row, .photo-catalog .catalog-entry .meta,
    .photo-catalog-min .catalog-entry .row, .photo-catalog-min .catalog-entry .meta {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 12px !important;
        width: 100% !important;
    }
    
    .catalog-entry .row div, .catalog-entry .meta div, .video-catalog-entry .meta div, .video-catalog-entry .row div {
        display: flex !important;
        justify-content: center !important;
        text-align: center !important;
        width: 100% !important;
        margin: 0 !important;
    }
    
    .catalog-entry .row .date, .catalog-entry .meta .date, .video-catalog-entry .row .date, .video-catalog-entry .meta .date,
    .catalog-entry .date, .video-catalog-entry .date {
        text-align: center !important;
        justify-content: center !important;
        margin: 0 auto !important;
    }
    
    .pricing-grid { grid-template-columns: 1fr; max-width: 400px; }
    a.tier:nth-child(3) { grid-column: span 1; }
    .payment-row { grid-template-columns: 1fr !important; }
    .about-grid { grid-template-columns: repeat(2, 1fr); }
}


/* --------------------------------------------------------------------------
   7. LEGACY ENGINE (Cart & Upload - Do Not Remove)
   -------------------------------------------------------------------------- */
.cart{clear:both;position:fixed;top:0;right:0;background-color:#000;padding:16px;display:none;max-height:100%;overflow-x:hidden;overflow-y:auto;border:1px solid #222;border-radius:0 0 0 10px}
.cart::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);border-radius:10px;background-color:#222}
.cart::-webkit-scrollbar{width:11px;background-color:#000}
.cart::-webkit-scrollbar-thumb{border-radius:10px;-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);background-color:#555}
.cart hr{border:0;height:1px;background-color:#444;display:block !important;}
.cart .cart-header{line-height:50%}
.cart .cart-header:hover{cursor:pointer}
.cart .cart-header tr td:first-child{text-align:center}
.cart .cart-header span,.cart .cart-header td{font-size:20pt;color:#666}
.cart .cart-header .caret{border-left:10px solid transparent;border-right:10px solid transparent;border-top:10px solid #777;margin-left:22px;margin-top:-1px}
.cart .cart-header .caret-rotate{transform:rotate(-90deg)}
.cart .cart-header .item-count{font-size:15pt;line-height:100%}
.cart .items{display:block}
.cart .items tr td{padding-bottom:10px}
.cart .items tr:last-child td{padding-bottom:0}
.cart .items i{font-size:20pt;margin-left:20px;color:#222}
.cart .items i:hover{color:red;cursor:pointer}
.cart .items .item-img{width:133px;height:133px;text-align:right;clear:both;position:relative}
.cart .items .item-img:hover{cursor:pointer}
.cart .items .item-img img{max-width:133px;max-height:133px;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border:1px solid #333;padding:6px}
.cart .items .item-img img:hover{border:1px solid #b0b0b0}
.cart .button{color:#4aae4c}
.cart .btn-cbf{font-size:17pt;text-shadow:1px 1px 2px rgba(0,0,0,.1);float:right;color:#fff}
@media only screen and (max-width:1024px){.cart{zoom:.7;-moz-transform:scale(.7)}}

body.upload-page{background-color:#000;margin:20px;color:#424242;font-family:Arial;font-size:14pt}
body.upload-page .page-container-upload{max-width:830px;margin-left:auto;margin-right:auto}
body.upload-page img{max-width:100%;height:auto}
body.upload-page input,body.upload-page textarea{background-color:#111;border-radius:16px;border:none;line-height:166%;padding-left:15px;padding-right:15px;color:#424242;font-family:Arial;font-size:14pt}
body.upload-page input[type=button]{background-color:#000;border:1px solid #111;line-height:166%;padding-left:20px;padding-right:20px;border-radius:0}
body.upload-page input[type=button]:hover{color:#bbb;cursor:pointer}
body.upload-page input:focus,body.upload-page textarea:focus{outline:0;color:#fff}
body.upload-page .header{text-align:center;margin-bottom:20px}
body.upload-page .header img{width:830px}
body.upload-page .upload{border:2px dashed #1d1d1d;display:table-cell;text-align:center;width:830px;text-align:center;vertical-align:middle}
body.upload-page .upload:hover{cursor:pointer}
body.upload-page #upload-files{display:none}
body.upload-page .file-manager{border:2px solid #0e0e0e;height:360px;vertical-align:bottom;display:table-cell;width:830px;padding:15px}
body.upload-page .publish{text-align:center;margin-top:15px}
body.upload-page .publish img{width:150px;height:auto}
body.upload-page .upload input{display:none}
body.upload-page .after-upload{margin-top:15px}
body.upload-page .upload-info{line-height:166%;padding-top:20px}
body.upload-page .upload-info label{width:235px;text-align:right;padding-right:9px;display:inline-block;vertical-align:top;padding-bottom:10px}
body.upload-page #date{width:145px}
body.upload-page #model{width:245px}
body.upload-page #desc{width:320px;height:200px}
body.upload-page #post{margin-left:381px}
body.upload-page #progress{width:0%;height:8px;background-color:#4dbd33}