/* ==========================================================
   RESET
========================================================== */

*,
*::before,
*::after{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{

    font-family:Inter,"Segoe UI",Arial,sans-serif;

    font-size:16px;

    line-height:1.6;

    color:#1f2937;

    background:
        radial-gradient(circle at top,#dbeafe 0%,#eef4ff 30%,#f5f8fc 70%,#f8fafc 100%);

    min-height:100vh;

    -webkit-font-smoothing:antialiased;

}

img{

    display:block;

    max-width:100%;

}

button,
select{

    font:inherit;

    border:none;

    outline:none;

}

button{

    cursor:pointer;

}

a{

    text-decoration:none;

    color:inherit;

}

/* ==========================================================
   VARIABLES
========================================================== */

:root{

    --primary:#2563eb;

    --primary-hover:#1d4ed8;

    --dark:#111827;

    --text:#1f2937;

    --muted:#6b7280;

    --glass:rgba(255,255,255,.52);

    --glass-border:rgba(255,255,255,.55);

    --shadow:

        0 15px 45px rgba(15,23,42,.08);

    --radius:22px;

    --transition:.25s ease;

}

/* ==========================================================
   CONTAINER
========================================================== */

.container{

    width:100%;

    max-width:1220px;

    margin:auto;

    padding:0 20px;

}

/* ==========================================================
   HEADER
========================================================== */

.header{

    position:sticky;

    top:0;

    z-index:999;

    backdrop-filter:blur(22px);

    background:rgba(255,255,255,.38);

    border-bottom:1px solid rgba(255,255,255,.45);

}

.header .container{

    height:74px;

    display:flex;

    align-items:center;

}

.logo{

    display:flex;

    align-items:center;

    gap:12px;

    font-size:23px;

    font-weight:800;

}

.logo span{

    font-size:18px;

}

/* ==========================================================
   HERO
========================================================== */

.hero{

    padding:70px 0 45px;

}

.hero-grid{

    display:grid;

    grid-template-columns:1.15fr .85fr;

    gap:45px;

    align-items:center;

}

.badge{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:10px 18px;

    border-radius:999px;

    background:#e8f0ff;

    color:#1d4ed8;

    font-size:14px;

    font-weight:700;

    margin-bottom:22px;

}

.hero h1{

    font-size:52px;

    line-height:1.08;

    margin-bottom:22px;

    font-weight:800;

}

.hero-text{

    max-width:620px;

    color:var(--muted);

    font-size:18px;

    margin-bottom:35px;

}

/* ==========================================================
   GLASS
========================================================== */

.glass{

    background:var(--glass);

    backdrop-filter:blur(28px);

    -webkit-backdrop-filter:blur(28px);

    border:1px solid var(--glass-border);

    box-shadow:var(--shadow);

    border-radius:var(--radius);

}

/* ==========================================================
   FORM
========================================================== */

.form-card{

    padding:28px;

}

.field{

    position:relative;

    margin-bottom:22px;

}

.field:last-child{

    margin-bottom:0;

}

.field label{

    display:block;

    margin-bottom:8px;

    font-size:14px;

    font-weight:700;

    color:var(--muted);

}

.field select{

    width:100%;

    height:56px;

    padding:0 18px;

    border-radius:14px;

    appearance:none;

    background:rgba(255,255,255,.72);

    border:1px solid rgba(255,255,255,.75);

    transition:var(--transition);

}

.field::after{

    content:"⌄";

    position:absolute;

    right:18px;

    top:44px;

    pointer-events:none;

    color:#64748b;

    font-size:18px;

}

.field select:hover{

    border-color:#93c5fd;

}

.field select:focus{

    border-color:var(--primary);

    box-shadow:

        0 0 0 4px rgba(37,99,235,.12);

}

/* ==========================================================
   BUTTONS
========================================================== */

.btn{

    width:100%;

    height:56px;

    border-radius:15px;

    font-weight:700;

    transition:var(--transition);

}

.btn-primary{

    background:var(--primary);

    color:#fff;

}

.btn-primary:hover{

    background:var(--primary-hover);

    transform:translateY(-2px);

}

.btn-light{

    background:rgba(255,255,255,.72);

}

.btn-dark{

    background:#111827;

    color:#fff;

}

/* ==========================================================
   STATS
========================================================== */

.stats{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:18px;

    margin-top:30px;

}

.stat{

    background:rgba(255,255,255,.45);

    border:1px solid rgba(255,255,255,.55);

    border-radius:18px;

    backdrop-filter:blur(20px);

    text-align:center;

    padding:20px;

}

.number{

    color:var(--primary);

    font-size:34px;

    font-weight:800;

}

.label{

    color:var(--muted);

    margin-top:5px;

}

/* ==========================================================
   PREVIEW
========================================================== */

.preview{

    padding:36px;

}

.preview-caption{

    font-size:18px;

    font-weight:700;

    margin-bottom:18px;

}

.preview-address{

    font-size:28px;

    font-weight:800;

    line-height:1.35;

    margin-bottom:26px;

}

.preview-name{

    font-size:18px;

    color:var(--muted);

}

/* ==========================================================
   GENERATOR
========================================================== */

.generator{

    padding:55px 0;
    scroll-margin-top:90px;

}

.generator:focus{
    outline:none;
}

.cards{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:28px;

}

.card{

    padding:28px;

}

.card-title{

    font-size:24px;

    font-weight:800;

    margin-bottom:24px;

}

/* ==========================================================
   FULL ADDRESS
========================================================== */

.full-address{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:18px;

    margin-bottom:24px;

    padding:18px 20px;

    background:rgba(255,255,255,.48);

    border:1px solid rgba(255,255,255,.55);

    border-radius:18px;

}

#fullAddress{

    flex:1;

    font-size:21px;

    font-weight:700;

    line-height:1.5;

    word-break:break-word;

}

/* ==========================================================
   ROWS
========================================================== */

.rows{

    display:flex;

    flex-direction:column;

    gap:12px;

}

.row{

    display:grid;

    grid-template-columns:170px 1fr 42px;

    align-items:center;

    gap:15px;

    padding:14px 16px;

    border-radius:15px;

    background:rgba(255,255,255,.42);

    border:1px solid rgba(255,255,255,.45);

    transition:var(--transition);

}

.row:hover{

    background:rgba(255,255,255,.72);

    transform:translateY(-2px);

}

.row-name{

    color:var(--muted);

    font-weight:600;

}

.row-value{

    font-weight:700;

    overflow-wrap:anywhere;

    word-break:break-word;

}

/* ==========================================================
   COPY BUTTONS
========================================================== */

.copy-btn,
.copy-field{

    width:40px;

    height:40px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:12px;

    background:rgba(255,255,255,.82);

    border:1px solid rgba(255,255,255,.8);

    transition:var(--transition);

}

.copy-btn:hover,
.copy-field:hover{

    background:var(--primary);

    color:#fff;

    transform:scale(1.08);

    box-shadow:0 8px 22px rgba(37,99,235,.25);

}

.copy-btn:active,
.copy-field:active{

    transform:scale(.92);

}

/* ==========================================================
   ACTIONS
========================================================== */

.actions{

    margin-top:35px;

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:18px;

}

/* ==========================================================
   HISTORY
========================================================== */

.history-section{

    padding:70px 0;

}

.history-section h2{

    font-size:36px;

    margin-bottom:28px;

}

.history-list{

    display:grid;

    grid-template-columns:repeat(auto-fill,minmax(270px,1fr));

    gap:20px;

}

.history-item{

    padding:22px;

    border-radius:20px;

    background:rgba(255,255,255,.48);

    backdrop-filter:blur(22px);

    border:1px solid rgba(255,255,255,.55);

    cursor:pointer;

    transition:var(--transition);

}

.history-item:hover{

    transform:translateY(-4px);

    box-shadow:0 18px 38px rgba(0,0,0,.08);

}

.history-item h3{

    font-size:20px;

    margin-bottom:10px;

}

.history-item p{

    color:var(--muted);

    margin-bottom:6px;

}

.history-empty{

    grid-column:1/-1;

    padding:50px;

    text-align:center;

    border-radius:20px;

    background:rgba(255,255,255,.42);

    border:2px dashed rgba(255,255,255,.6);

    color:var(--muted);

}

/* ==========================================================
   SEO
========================================================== */

.seo-content{

    padding:75px 0;

}

.seo-content h2{

    font-size:36px;

    margin-bottom:24px;

}

.seo-content p{

    margin-bottom:22px;

    line-height:1.9;

    font-size:17px;

    color:#374151;

}

/* ==========================================================
   FAQ
========================================================== */

.faq{

    padding-bottom:90px;

}

.faq h2{

    font-size:36px;

    margin-bottom:25px;

}

.faq details{

    margin-bottom:18px;

    border-radius:18px;

    overflow:hidden;

    background:rgba(255,255,255,.48);

    border:1px solid rgba(255,255,255,.55);

    backdrop-filter:blur(20px);

}

.faq summary{

    list-style:none;

    cursor:pointer;

    position:relative;

    padding:22px 26px;

    font-size:18px;

    font-weight:700;

}

.faq summary::-webkit-details-marker{

    display:none;

}

.faq summary::after{

    content:"+";

    position:absolute;

    right:24px;

    top:50%;

    transform:translateY(-50%);

    font-size:28px;

    color:var(--primary);

}

.faq details[open] summary::after{

    content:"−";

}

.faq p{

    padding:0 26px 24px;

    color:var(--muted);

}

/* ==========================================================
   FOOTER
========================================================== */

.footer{

    padding:35px 0;

    text-align:center;

    color:var(--muted);

    border-top:1px solid rgba(255,255,255,.45);

    background:rgba(255,255,255,.3);

    backdrop-filter:blur(18px);

}

/* ==========================================================
   TOAST
========================================================== */

.toast{

    position:fixed;

    right:24px;

    bottom:24px;

    background:#111827;

    color:#fff;

    padding:15px 24px;

    border-radius:14px;

    opacity:0;

    visibility:hidden;

    transform:translateY(20px);

    transition:.25s;

    z-index:9999;

}

.toast.show{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}

/* ==========================================================
   RESPONSIVE
========================================================== */

@media(max-width:1100px){

    .hero-grid,
    .cards{

        grid-template-columns:1fr;

    }

}

@media(max-width:768px){

    .hero{

        padding-top:45px;

    }

    .hero h1{

        font-size:38px;

    }

    .stats{

        grid-template-columns:repeat(3,minmax(0,1fr));
        gap:8px;
        margin-top:16px;

    }

    .stat{

        min-width:0;
        padding:10px 6px;
        border-radius:14px;

    }

    .number{

        font-size:19px;
        line-height:1.15;

    }

    .label{

        margin-top:2px;
        font-size:11px;
        line-height:1.2;

    }

    .actions{

        grid-template-columns:1fr;

    }

    .row{

        grid-template-columns:minmax(92px,.8fr) minmax(0,1.4fr) 40px;
        gap:10px;
        padding:12px;

    }

    .row-name{

        font-size:13px;

    }

    .copy-field{

        justify-self:end;

    }

    .full-address{

        align-items:center;
        padding:15px;

    }

    #fullAddress{

        font-size:18px;

    }

}

@media(max-width:520px){

    .hero-right{
        display:none;
    }

    .hero{
        padding-bottom:24px;
    }

    .generator{
        padding-top:28px;
    }

    .container{

        padding:0 15px;

    }

    .hero h1{

        font-size:31px;

    }

    .preview-address{

        font-size:22px;

    }

    .glass{

        padding:22px !important;

    }

    .toast{

        left:15px;

        right:15px;

        bottom:15px;

        text-align:center;

    }

}

/* ==========================================================
   APP STORE GUIDE
========================================================== */

.appstore-guide{

    max-width:1000px;

    margin:0 auto 55px;

    padding:34px;

    border-radius:24px;

    background:rgba(255,255,255,.48);

    backdrop-filter:blur(22px);

    border:1px solid rgba(255,255,255,.55);

    box-shadow:0 18px 45px rgba(15,23,42,.08);

}

.appstore-guide h2{

    font-size:34px;

    margin-bottom:18px;

    line-height:1.2;

}

.appstore-guide p{

    margin:18px 0;

    color:#374151;

    line-height:1.9;

}

.appstore-guide ol{

    margin:22px 0;

    padding-left:24px;

}

.appstore-guide ul{

    margin-top:12px;

    padding-left:22px;

}

.appstore-guide li{

    margin:10px 0;

    line-height:1.8;

}

.appstore-guide strong{

    color:#1d4ed8;

}

/* ==========================================================
   SEO ARTICLE
========================================================== */

.seo-content{

    max-width:1000px;

    margin:0 auto;

    padding:38px;

    border-radius:24px;

    background:rgba(255,255,255,.48);

    backdrop-filter:blur(22px);

    border:1px solid rgba(255,255,255,.55);

    box-shadow:0 18px 45px rgba(15,23,42,.08);

}

.seo-content h2{

    font-size:34px;

    margin:38px 0 18px;

    line-height:1.25;

}

.seo-content h2:first-child{

    margin-top:0;

}

.seo-content p{

    margin:16px 0;

    font-size:17px;

    color:#374151;

    line-height:1.9;

}

.seo-content ul,

.seo-content ol{

    margin:18px 0;

    padding-left:24px;

}

.seo-content li{

    margin:10px 0;

    line-height:1.8;

}

.seo-content strong{

    color:#1d4ed8;

    font-weight:700;

}

/* ==========================================================
   MOBILE
========================================================== */

@media (max-width:768px){

    .appstore-guide,
    .seo-content{

        padding:24px;

        border-radius:20px;

    }

    .appstore-guide h2,
    .seo-content h2{

        font-size:28px;

    }

}

@media (max-width:520px){

    .appstore-guide,
    .seo-content{

        padding:20px;

    }

    .appstore-guide h2,
    .seo-content h2{

        font-size:24px;

    }

    .appstore-guide p,
    .seo-content p{

        font-size:16px;

        line-height:1.8;

    }

}
/* ==========================================================
   PRODUCT DEPTH: ACTIONS, FORM MAPPING, SAVED ADDRESSES
========================================================== */

.actions{
    grid-template-columns:repeat(3,minmax(0,1fr));
}

.form-example{
    margin-top:28px;
    padding:28px;
    border-radius:var(--radius);
    background:rgba(255,255,255,.5);
    border:1px solid var(--glass-border);
    box-shadow:var(--shadow);
    backdrop-filter:blur(22px);
}

.section-heading-row,
.saved-panel-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:20px;
}

.section-kicker{
    display:block;
    margin-bottom:5px;
    color:var(--primary);
    font-size:13px;
    font-weight:800;
    letter-spacing:.04em;
    text-transform:uppercase;
}

.form-example h2,
.saved-panel h2{
    margin:0;
    font-size:25px;
    line-height:1.25;
}

.mini-action,
.text-action{
    flex-shrink:0;
    border-radius:12px;
    background:rgba(255,255,255,.8);
    color:var(--primary);
    font-weight:700;
    transition:var(--transition);
}

.mini-action{
    padding:11px 15px;
}

.text-action{
    padding:8px 10px;
    font-size:14px;
}

.mini-action:hover,
.text-action:hover{
    background:#fff;
    transform:translateY(-1px);
}

.form-fields-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
    margin-top:20px;
}

.form-field-item{
    display:grid;
    grid-template-columns:92px minmax(0,1fr) 38px;
    align-items:center;
    gap:12px;
    min-height:58px;
    padding:10px 12px 10px 16px;
    border-radius:15px;
    background:rgba(255,255,255,.58);
    border:1px solid rgba(255,255,255,.65);
}

.form-field-item span{
    color:var(--muted);
    font-size:14px;
    font-weight:700;
}

.form-field-item strong{
    overflow-wrap:anywhere;
}

.form-field-wide{
    grid-column:1/-1;
}

.copy-form-field{
    width:36px;
    height:36px;
    border-radius:10px;
    background:rgba(255,255,255,.86);
    transition:var(--transition);
}

.copy-form-field:hover{
    background:var(--primary);
    color:#fff;
}

.saved-section{
    padding:35px 0 70px;
}

.saved-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:28px;
}

.saved-panel{
    min-width:0;
    padding:28px;
    border-radius:var(--radius);
    background:rgba(255,255,255,.48);
    border:1px solid var(--glass-border);
    box-shadow:var(--shadow);
    backdrop-filter:blur(22px);
}

.saved-list{
    display:flex;
    flex-direction:column;
    gap:12px;
    margin-top:20px;
}

.saved-item{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:14px;
    padding:16px;
    border-radius:16px;
    background:rgba(255,255,255,.62);
    border:1px solid rgba(255,255,255,.68);
}

.saved-item-main{
    min-width:0;
    cursor:pointer;
}

.saved-item-state{
    display:inline-flex;
    margin-bottom:6px;
    padding:3px 8px;
    border-radius:999px;
    background:#e8f0ff;
    color:#1d4ed8;
    font-size:12px;
    font-weight:800;
}

.saved-item strong,
.saved-item small{
    display:block;
    overflow-wrap:anywhere;
}

.saved-item small{
    margin-top:4px;
    color:var(--muted);
}

.saved-item-actions{
    display:flex;
    align-items:flex-start;
    gap:6px;
}

.saved-icon-btn{
    width:36px;
    height:36px;
    border-radius:10px;
    background:rgba(255,255,255,.88);
    transition:var(--transition);
}

.saved-icon-btn:hover{
    color:#fff;
    background:var(--primary);
}

#favoriteBtn[aria-pressed="true"]{
    color:#9a6700;
    background:#fff7d6;
}

@media(max-width:900px){
    .saved-grid{
        grid-template-columns:1fr;
    }
}

@media(max-width:768px){
    .actions{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:10px;
    }

    .actions .btn{
        height:50px;
        padding:0 10px;
        font-size:14px;
    }

    .form-example,
    .saved-panel{
        padding:20px;
    }

    .form-fields-grid{
        grid-template-columns:1fr;
    }

    .form-field-wide{
        grid-column:auto;
    }
}

@media(max-width:520px){
    .section-heading-row,
    .saved-panel-head{
        align-items:center;
    }

    .form-example h2,
    .saved-panel h2{
        font-size:21px;
    }

    .form-field-item{
        grid-template-columns:72px minmax(0,1fr) 36px;
        gap:8px;
        padding-left:12px;
    }

    .saved-item{
        grid-template-columns:1fr;
    }

    .saved-item-actions{
        justify-content:flex-end;
    }
}