/*=====================================================
  SWARNIM SAHITYA
  BOOK ROYALTY CALCULATOR
======================================================*/


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

:root{

    --primary:#ff9d00;

    --primary-dark:#ff7a18;

    --secondary:#ff5e62;

    --gradient:
        linear-gradient(
            135deg,
            #ff9d00 0%,
            #ff7a18 45%,
            #ff5e62 100%
        );

    --success:#16a34a;

    --danger:#dc2626;

    --white:#ffffff;

    --background:#fff8f1;

    --card:#ffffff;

    --border:#ececec;

    --text:#222222;

    --muted:#777777;

    --radius:20px;

    --transition:.30s ease;

    --shadow-sm:
        0 6px 18px rgba(0,0,0,.05);

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

}


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



html{

    scroll-behavior:smooth;

}



/*=====================================================
  SECTION
======================================================*/
#mainContent{background:linear-gradient(
        180deg,
        #fffdf9 0%,
        #fff7f0 100%
    );


}



#mainContent{

    position:relative;

    padding:40px 0 70px;

    overflow:hidden;

}


/* Background Glow */

#mainContent::before{

    content:"";

    position:absolute;

    top:-140px;

    right:-120px;

    width:320px;

    height:320px;

    border-radius:50%;

    background:

        rgba(255,153,0,.06);

    

}

.royalty-section.py-4{padding-top:0rem!important;}

#mainContent::after{

    content:"";

    position:absolute;

    left:-120px;

    bottom:-120px;

    width:280px;

    height:280px;

    border-radius:50%;

    background:

         rgba(255,153,0,.06);




}


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

.royalty-hero{

    position:relative;

    z-index:5;

    margin-bottom:30px;

}

.royalty-badge{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:10px 18px;

    border-radius:50px;

    background:#fff2df;

    color:var(--primary-dark);

    font-size:14px;

    font-weight:600;

}

.royalty-title{

    margin-top:18px;

    font-size:30px;

    font-weight:700;

    color:#222;

}

.royalty-subtitle{

    margin-top:10px;

    color:#777;

    font-size:15px;

}


/*=====================================================
  MAIN CARD
======================================================*/

.royalty-card{

    position:relative;

    background:var(--card);

    border-radius:0px;

    overflow:hidden;

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

    box-shadow:var(--shadow);

    transition:var(--transition);

}

.royalty-card:hover{

    transform:translateY(-4px);

    box-shadow:

        0 25px 55px rgba(0,0,0,.10);

}


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

.royalty-card-header{

    display:flex;

    align-items:center;

    gap:18px;

    padding:10px 25px;

    background:var(--gradient);

    color:#fff;

}

.royalty-card-header h4{

    margin:0;

    font-size:16px;

    font-weight:700;
    color:white;

}

.royalty-card-header p{

    margin:4px 0 0;

    color:rgba(255,255,255,.92);

    font-size:12px;

}

.royalty-icon{

    width:40px;

    height:40px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:

        rgba(255,255,255,.18);

    backdrop-filter:blur(8px);

    font-size:15px;

}


/*=====================================================
  CARD BODY
======================================================*/

.royalty-card-body{

    padding:24px;

}


/*=====================================================
  LEFT PANEL
======================================================*/

.left-panel{

    position:sticky;

    top:20px;

}


/*=====================================================
  RIGHT PANEL
======================================================*/

.right-panel{

    min-height:100%;

}


/*=====================================================
  DIVIDER
======================================================*/

.royalty-divider{

    border:none;

    border-top:1px solid #ececec;

    margin:24px 0;

}

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

.form-label{

    display:block;

    margin-bottom:8px;

    color:var(--text);

    font-size:14px;

    font-weight:600;

}


/*=====================================================
  INPUTS
======================================================*/

.royalty-input{

    width:100%;

    height:40px;

    padding:0 18px;

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

    border-radius:0px;

    background:#fff;

    font-size:15px;

    color:var(--text);

    transition:all .30s ease;

    box-shadow:none;

}

.royalty-input::placeholder{

    color:#b1b1b1;

}

.royalty-input:hover{

    border-color:#ffc46d;

}

.royalty-input:focus{

    border-color:var(--primary);

    outline:none;

    box-shadow:

        0 0 0 4px rgba(255,157,0,.12);

}


/*=====================================================
  SELECT
======================================================*/

select.royalty-input{

    cursor:pointer;

    appearance:none;

    -webkit-appearance:none;

    -moz-appearance:none;

    padding-right:45px;

    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='%23ff7a18' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 5.5L8 12l6.5-6.5' stroke='%23ff7a18' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

    background-repeat:no-repeat;

    background-position:right 16px center;

}


/*=====================================================
  BUTTON
======================================================*/

.royalty-btn{

    width:100%;

    height:40px;

    border:none;

    border-radius:6px;

    background:var(--gradient);

    color:#fff;

    font-size:16px;

    font-weight:700;

    transition:.30s;

    box-shadow:

        0 12px 25px rgba(255,122,24,.25);

}

.royalty-btn:hover{

    transform:translateY(-2px);

    box-shadow:

        0 18px 35px rgba(255,122,24,.35);

}

.royalty-btn:active{

    transform:scale(.98);

}

.royalty-btn:focus{

    outline:none;

}


/*=====================================================
  PLAN TITLE
======================================================*/

.plan-title{

    margin:20px 0 14px;

    font-size:15px;

    font-weight:700;

    color:var(--text);

}


/*=====================================================
  PLAN GRID
======================================================*/

.plan-grid{

    display:grid;

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

    gap:14px;

}


/*=====================================================
  PLAN CARD
======================================================*/

.plan-card{

    position:relative;

    padding:18px;

    border:2px solid #ececec;

    border-radius:0px;

    background:#fff;

    cursor:pointer;

    transition:.30s;

    overflow:hidden;

}

.plan-card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:4px;

    background:transparent;

    transition:.30s;

}

.plan-card:hover{

    transform:translateY(-3px);

    border-color:#2da379;

    box-shadow:

        0 12px 30px rgba(0,0,0,.08);

}

.plan-card.active{

    border-color:#2da379;

    background:#fffaf4;

}

.plan-card.active::before{

    background:#2da379;

}

.plan-card h5{

    margin:0;

    font-size:18px;

    font-weight:700;

    color:#222;

}

.plan-card small{

    display:block;

    margin-top:6px;

    color:#666;

    font-size:13px;

}

.plan-card span{

    display:inline-block;

    margin-top:12px;

    padding:5px 10px;

    border-radius:30px;

    background:#fff2dd;

    color:var(--primary-dark);

    font-size:12px;

    font-weight:600;

}


/*=====================================================
  ACTIVE ICON
======================================================*/

.plan-card.active::after{

    content:"✓";

    position:absolute;

    right:14px;

    top:12px;

    width:24px;

    height:24px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#2da379;

    color:#fff;

    font-size:13px;

    font-weight:700;

}


/*=====================================================
  LOADING BUTTON
======================================================*/

.royalty-btn.loading{

    pointer-events:none;

    opacity:.8;

}

.royalty-btn.loading::after{

    content:"";

    width:18px;

    height:18px;

    margin-left:10px;

    display:inline-block;

    border:2px solid rgba(255,255,255,.35);

    border-top-color:#fff;

    border-radius:50%;

    animation:spin .7s linear infinite;

    vertical-align:middle;

}

@keyframes spin{

    to{

        transform:rotate(360deg);

    }

}

/*=====================================================
  RESULT DASHBOARD
======================================================*/

.result-grid{

    display:grid;

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

    gap:18px;

    margin-top:10px;

}

.summary-box{

    position:relative;

    background:#ffffff;

    border:1px solid #ececec;

    border-radius:0px;

    padding:20px;

    transition:all .30s ease;

    overflow:hidden;

    box-shadow:
        0 8px 22px rgba(0,0,0,.05);

}

.summary-box:hover{

    transform:translateY(-4px);

    border-color:#ffb54d;

    box-shadow:
        0 18px 35px rgba(0,0,0,.10);

}

.summary-box::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:4px;

    background:var(--gradient);

}

.summary-box span{

    display:block;

    color:#777;

    font-size:13px;

    font-weight:600;

    margin-bottom:10px;

    text-transform:uppercase;

    letter-spacing:.4px;

}

.summary-box strong{

    display:block;

    color:#222;

    font-size:17px;

    font-weight:700;

    line-height:1.2;

}

/*=====================================================
  SPECIAL COLORS
======================================================*/

.summary-box.success::before{

    background:#16a34a;

}

.summary-box.warning::before{

    background:#f59e0b;

}

.summary-box.primary::before{

    background:#2563eb;

}

.summary-box.info::before{

    background:#06b6d4;

}

/*=====================================================
  SELLING PRICE
======================================================*/

.price-section{

    margin-top:30px;

    padding:22px;

    border-radius:18px;

    background:#fffaf3;

    border:1px solid #ffe3b2;

}

.price-section .form-label{

    font-size:15px;

    font-weight:700;

    margin-bottom:10px;

}

/*=====================================================
  EARNING RESULT
======================================================*/

.earning-grid{

    display:grid;

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

    gap:18px;

    margin-top:25px;

}

/*=====================================================
  ANIMATION
======================================================*/

.fade-up{

    animation:fadeUp .45s ease;

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(20px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

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

@media(max-width:992px){

    .result-grid{

        grid-template-columns:1fr;

    }

    .earning-grid{

        grid-template-columns:1fr;

    }

}

@media(max-width:768px){

    .royalty-section{

        padding:25px 0;

    }

    .royalty-title{

        font-size:30px;

    }

    .royalty-card{

        border-radius:18px;

    }

    .royalty-card-header{

        padding:18px;

    }

    .royalty-card-body{

        padding:18px;

    }

    .summary-box{

        padding:18px;

    }

    .summary-box strong{

        font-size:24px;

    }

    .plan-grid{

        grid-template-columns:1fr;

    }

}

@media(max-width:576px){

    .royalty-title{

        font-size:24px;

    }

    .royalty-badge{

        font-size:12px;

        padding:8px 14px;

    }

    .royalty-input{

        height:50px;

        font-size:14px;

    }

    .royalty-btn{

        height:52px;

        font-size:15px;

    }

    .summary-box strong{

        font-size:22px;

    }

}

/*=====================================================
  HIDDEN
======================================================*/



/*=====================================================
  END OF FILE
======================================================*/