/* =========================================================
   OBS DESIGN SYSTEM
   Register Page
   ========================================================= */

/* =========================================================
   GRID
   ========================================================= */
.obs-register-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--obs-space-3);
}

.obs-register-full {
	grid-column: 1/-1;
}

/* =========================================================
   CONDITIONAL FIELD
   ========================================================= */
.obs-register-conditional[hidden] {
	display: none;
}

/* =========================================================
   FILE INPUT
   ========================================================= */

.obs-file-field {
    position: relative;
    width: 100%;
}


/* INPUT */

.obs-file-input {
    width: 100%;
    min-width: 0;
    min-height: var(--obs-control-height-lg);

    padding:
        var(--obs-space-5)
        var(--obs-space-4)
        var(--obs-space-2)
        calc(
            var(--obs-space-4) +
            var(--obs-icon-size-md) +
            var(--obs-space-3)
        );

    box-sizing: border-box;

    color: var(--obs-input-text);
    background: var(--obs-input-bg);

    border:
        var(--obs-border-width-thin)
        solid
        var(--obs-border-primary);

    border-radius: var(--obs-radius-lg);

    font-family: inherit;
    font-size: var(--obs-font-size-md);

    outline: none;
    cursor: pointer;

    transition:
        background var(--obs-transition-fast),
        border-color var(--obs-transition-fast),
        box-shadow var(--obs-transition-fast);
}


.obs-file-input:hover {
    border-color: var(--obs-border-hover);
}


.obs-file-input:focus {
    background: var(--obs-input-bg-focus);
    border-color: var(--obs-primary);
    box-shadow: var(--obs-focus-ring);
}


/* CHOOSE FILE BUTTON */

.obs-file-input::file-selector-button {
    margin-right: var(--obs-space-3);

    padding:
        var(--obs-space-2)
        var(--obs-space-3);

    color: var(--obs-button-primary-text);
    background: var(--obs-primary);

    border: 0;
    border-radius: var(--obs-radius-sm);

    font-family: inherit;
    font-weight: var(--obs-font-weight-semibold);

    cursor: pointer;

    transition:
        background var(--obs-transition-fast),
        color var(--obs-transition-fast);
}


.obs-file-input::file-selector-button:hover {
    background: var(--obs-primary-hover);
}


/* FLOATING LABEL */

.obs-file-label {
    position: absolute;

    top: var(--obs-space-2);

    left: calc(
        var(--obs-space-4) +
        var(--obs-icon-size-md) +
        var(--obs-space-3)
    );

    color: var(--obs-text-secondary);

    font-size: var(--obs-font-size-xs);
    line-height: 1;

    pointer-events: none;
}


/* SOL İKON */

.obs-file-icon {
    position: absolute;

    top: calc(var(--obs-control-height-lg) / 2);
    left: var(--obs-space-4);

    width: var(--obs-icon-size-md);
    height: var(--obs-icon-size-md);

    color: var(--obs-input-icon);

    opacity: 0.8;

    transform: translateY(-50%);

    pointer-events: none;
}


.obs-file-field:focus-within .obs-file-icon {
    color: var(--obs-primary);
    opacity: 1;
}
/* =========================================================
   FILE HELP
   ========================================================= */
.obs-register-file-help {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--obs-space-2);
	margin-top: var(--obs-space-2);
	color: var(--obs-text-muted);
	font-size: var(--obs-font-size-xs);
}

.obs-register-badge {
	display: inline-flex;
	align-items: center;
	min-height: var(--obs-control-height-sm);
	padding: var(--obs-space-1) var(--obs-space-3);
	color: var(--obs-text-secondary);
	background: var(--obs-surface-2);
	border: var(--obs-border-width-thin) solid var(--obs-border-secondary);
	border-radius: var(--obs-radius-pill);
	font-weight: var(--obs-font-weight-bold);
}

/* =========================================================
   MESSAGES
   ========================================================= */
.obs-register-message-area {
	min-height: 0;
}

.obs-register-message-area:empty {
	display: none;
}

/* =========================================================
   SUBMIT
   ========================================================= */
.obs-register-submit {
	width: 100%;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media ( max-width : 720px) {
	.obs-register-grid {
		grid-template-columns: 1fr;
	}
	.obs-register-full {
		grid-column: auto;
	}
}

/* =========================================================
   SELECT WITH LEFT ICON
   Role / Döviz Türü
   ========================================================= */
/* =========================================================
   REGISTER SELECT
   Role / Döviz Türü
   ========================================================= */

.obs-register-grid .obs-select-wrapper {
    position: relative;
}


/* SELECT */

.obs-register-grid .obs-select-wrapper .obs-select {
    width: 100%;
    min-width: 0;

    padding-left: calc(
        var(--obs-space-4) +
        var(--obs-icon-size-md) +
        var(--obs-space-3)
    );

    padding-right: calc(
        var(--obs-space-4) +
        var(--obs-icon-size-md) +
        var(--obs-space-2)
    );

    padding-top: var(--obs-space-4);
    padding-bottom: var(--obs-space-1);

    box-sizing: border-box;
}


/* SOL İKON */

.obs-register-grid .obs-select-wrapper .obs-select-icon {
    position: absolute;

    left: var(--obs-space-4);
    top: 50%;

    width: var(--obs-icon-size-md);
    height: var(--obs-icon-size-md);

    transform: translateY(-50%);

    pointer-events: none;
    z-index: 2;
}


/* FLOATING LABEL */

.obs-register-grid .obs-select-wrapper .obs-select-label {
    position: absolute;

    top: var(--obs-space-2);

    left: calc(
        var(--obs-space-4) +
        var(--obs-icon-size-md) +
        var(--obs-space-3)
    );

    font-size: var(--obs-font-size-xs);
    line-height: 1;

    pointer-events: none;
    z-index: 2;
}


/* SAĞ OK */

.obs-register-grid .obs-select-wrapper .obs-select-caret {
    position: absolute;

    top: 50%;
    right: var(--obs-space-4);

    width: var(--obs-icon-size-md);
    height: var(--obs-icon-size-md);

    display: flex;
    align-items: center;
    justify-content: center;

    transform: translateY(-50%);

    pointer-events: none;
    z-index: 2;
}